渲染规定数量的数据

例子：假如请求的数据共有十条，但是我在页面中渲染的时候只想渲染前面4条，后面的数据不渲染出来。

渲染指定数量的数据出来，分两种情况

• 普通渲染
• 封装组件的渲染

普通渲染

1.下面数据列表中有10条数据

data:{
    list:[{
        name:'数据1'
    },{
        name:'数据2'
    },{
        name:'数据3'
    },{
        name:'数据4'
    },{
        name:'数据5'
    },{
        name:'数据6'
    },{
        name:'数据7'
    },{
        name:'数据8'
    },{
        name:'数据9'
    },{
        name:'数据10'
    },]
}

2.先在页面中渲染出所有数据，查看是否能渲染成功

• wx:for---渲染数据列表
• wx:key---数据列表每一个成员的唯一值，用于比较新旧两个节点

<view class="list">
    <view wx:for="{{list}}" wx:key="index" class="item">
        {{item.name}}
    </view>
</view>

3.渲染所有数据的效果

image.png

4.现在我只想渲染出前面4条数据，其他的数据不渲染

• 在渲染的过程中加上一个判断就可以
• wx:if---条件判断

<view class="list">
    <view wx:for="{{list}}" wx:key="index" wx:if="{{index<4}}" class="item">
        {{item.name}}
    </view>
</view>

5.渲染前四条数据

image.png

注意：

一般作用于只显示一些数据，其他数据不显示，类似于

image.png

封装成组件渲染

1.假设我发送请求后得到的数据共十条

//初始数据
data:{
    list:[]
}

//然后在调用方法
onLoad(){
    this.test()
}

//发送请求的方法
test(){
    //假设这是我发送请求成功后返回的十条数据
    let list = [{
        name:'数据1'
    },{
        name:'数据2'
    },{
        name:'数据3'
    },{
        name:'数据4'
    },{
        name:'数据5'
    },{
        name:'数据6'
    },{
        name:'数据7'
    },{
        name:'数据8'
    },{
        name:'数据9'
    },{
        name:'数据10'
    },]
    //对数据进行截取，我需要的数量,表示截取三条数据
    list = list.slice(0,3)
    //然后重新赋值
    this.setData({
        list
    })
}

2.使用自定义组件时，需要先在josn文件中导入，然后再wxml中以标签名的形式使用

注意:在哪个模块中导入就在哪个模块的页面中使用，该组件属于局部组件，在app.json中导入的才算的全局组件

• 导入组件

//假设是在demo.json
{
    "usingComponents":{
        "demo-list":"/组件地址"
    }
}

• 使用组件

//是在demo.wxml中
//data是子组件自己定义的一个接收父组件传过去的数据类型
<demo-list data="{{list}}"/>

• 子组件中定义接收数据的类型

image.png

2.在请求数据成功后，使用slice('开始的索引号','结束的索引号')

注意：slice(start,end)截取的数据包前不包后

list = list.slice(0,3)  //截取了索引号0，1，2的数据

3.然后再传到子组件渲染

注意：

• 普通渲染，再渲染的过程中加一个判断条件即可：wx:if="{{index<4}}"。利用索引号来判断，少小于4的数据才渲染，大于的就不渲染
• 组件渲染，再请求成功后得到的大量数据的情况下，在请求完成红，使用slice(start,end)来截取所需数量的数据
• slice(start,end)截取的数据是包前不包后
• 在截取后成功赋值给data中的初始数据
• 在利用子组件规定的接收数据的变量去传递数据过去