用户中心(我的或发现里面)

(三).wx:key

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

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

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

二.案例

1.用户中心列表

[html]  view plain  copy

1. <span style="box-sizing: border-box; font-family: 'Comic Sans MS'; font-size: 18px;"><!--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></span>  

[html]  view plain  copy

1. <span style="box-sizing: border-box; font-family: 'Comic Sans MS'; font-size: 18px;">/**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. }</span>  

[html]  view plain  copy

1. <span style="box-sizing: border-box; font-family: 'Comic Sans MS'; font-size: 18px;">//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. })</span>