微信小程序 开发列表

一.知识点

(一).列表渲染 wx:for

 

tip:wx:for=“array”可以等于参数名，在js中调用

Page({ data:{

array: [{name: '小李'},{ name: '小高'}]}

 })，获取值；也可以直接把wx:for="{{[1, 2, 3]}}"，把值放在上面

 

1.在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item

 

1.  
   <view wx:for="{{items}}">
2.  
   {{index}}: {{item.message}}
3.  
   </view>

 

1.  
   var app = getApp()
2.  
   Page({
3.  
   data:{
4.  
   items: [{
5.  
   message: 'foo',
6.  
   },{
7.  
   message: 'bar'
8.  
   }]
9.  
   }
10.  
    })

 

首先在wxml文件中wx:for后面的双重大括号中的items是一个数组，数组的元素如js中所见，在wx:for下面{{index}}:{{item.arry}}中index是items数组的下标，item.arry是数组中的元素也即是“a”和“b”。


2.使用wx:for-item可以指定数组当前元素的变量名。使用wx:for-index可以指定数组当前下标的变量名：

 

1.  
   <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
2.  
   {{idx}}: {{itemName.name}}
3.  
   </view>

 

 

 

1.  
   var app = getApp()
2.  
   Page({
3.  
   data:{
4.  
   array: [{
5.  
   name: '小李',
6.  
   },{
7.  
   name: '小高'
8.  
   }]
9.  
   }
10.  
    })

 

3.wx:for也可以嵌套

 

1.  
   <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
2.  
   <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
3.  
   <view wx:if="{{i <= j}}">
4.  
   {{i}} * {{j}} = {{i * j}}
5.  
   </view>
6.  
   </view>
7.  
   </view>

 

都不需要js

（二）.block wx:for

类似block wx:if，也可以将wx:for用在<block/>标签上，以渲染一个包含多节点的结构块。

 

1.  
   <block wx:for="{{array}}">
2.  
   <view> {{index}}:{{item.name}}</view>
3.  
   </block>

1.  
   var app = getApp()
2.  
   Page({
3.  
   data:{
4.  
   array: [{
5.  
   name: '小李',
6.  
   },{
7.  
   name: '小高'
8.  
   }]
9.  
   }
10.  
    })

 

 

(三).wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input/> 中的输入内容，<switch/> 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

 

1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
2. 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：

 

如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

二.案例

1.用户中心列表

 

1.  
   <!--list.wxml-->
2.  
   <block wx:for="{{userListInfo}}">
3.  
   <view class="weui_cell">
4.  
   <view class="weui_cell_hd">
5.  
   <image src="{{item.icon}}"></image>
6.  
   </view>
7.  
   <view class="weui_cell_bd">
8.  
   <view class="weui_cell_bd_p"> {{item.text}} </view>
9.  
   </view>
10.  
    <view wx:if="{{item.isunread}}" class="badge">{{item.unreadNum}}</view>
11.  
    <view class="with_arrow"></view>
12.  
    </view>
13.  
    </block>

 

 

1.  
   /**list.wxss**/
2.  
   .weui_cell {
3.  
   position: relative;
4.  
   display: flex;
5.  
   padding: 15px;
6.  
   -webkit-box-align: center;
7.  
   -ms-flex-align: center;
8.  
   align-items: center;
9.  
   border-bottom: 1px solid #dadada;
10.  
    }
11.  
     
12.  
    .weui_cell_hd {
13.  
    display: inline-block;
14.  
    width: 20px;
15.  
    margin-right: 5px;
16.  
    }
17.  
     
18.  
    .weui_cell_hd image {
19.  
    width: 100%;
20.  
    height: 20px;
21.  
    vertical-align: -2px;
22.  
    }
23.  
     
24.  
    .weui_cell_bd {
25.  
    display: inline-block;
26.  
    }
27.  
     
28.  
    .weui_cell_bd_p {
29.  
    font-size: 14px;
30.  
    color: #939393;
31.  
    }
32.  
     
33.  
    .badge {
34.  
    position: absolute;
35.  
    top: 18px;
36.  
    right: 40px;
37.  
    width: 15px;
38.  
    height: 15px;
39.  
    line-height: 15px;
40.  
    background: #ff0000;
41.  
    color: #fff;
42.  
    border-radius: 50%;
43.  
    text-align: center;
44.  
    font-size: 8px;
45.  
    }
46.  
     
47.  
    .with_arrow {
48.  
    position: absolute;
49.  
    top: 18px;
50.  
    right: 15px;
51.  
    width: 15px;
52.  
    height: 15px;
53.  
    background-image: url(../../dist/images/icon-arrowdown.png);
54.  
    background-repeat: no-repeat;
55.  
    background-size: 100% 100%;
56.  
    }

 

 

1.  
   //list.js
2.  
   var app = getApp()
3.  
   Page( {
4.  
   data: {
5.  
   userInfo: {},
6.  
   userListInfo: [ {
7.  
   icon: '../../dist/images/iconfont-dingdan.png',
8.  
   text: '我的订单',
9.  
   isunread: true,
10.  
    unreadNum: 2
11.  
    }, {
12.  
    icon: '../../dist/images/iconfont-card.png',
13.  
    text: '我的代金券',
14.  
    isunread: false,
15.  
    unreadNum: 2
16.  
    }, {
17.  
    icon: '../../dist/images/iconfont-icontuan.png',
18.  
    text: '我的拼团',
19.  
    isunread: true,
20.  
    unreadNum: 1
21.  
    }, {
22.  
    icon: '../../dist/images/iconfont-shouhuodizhi.png',
23.  
    text: '收货地址管理'
24.  
    }, {
25.  
    icon: '../../dist/images/iconfont-kefu.png',
26.  
    text: '联系客服'
27.  
    }, {
28.  
    icon: '../../dist/images/iconfont-help.png',
29.  
    text: '常见问题'
30.  
    }]
31.  
    },
32.  
    onLoad: function() {
33.  
    var that = this
34.  
    //调用应用实例的方法获取全局数据
35.  
    app.getUserInfo( function( userInfo ) {
36.  
    //更新数据
37.  
    that.setData( {
38.  
    userInfo: userInfo
39.  
    })
40.  
    })
41.  
    }
42.  
    })