微信小程序列表开发详解

百变鹏仔 5天前 #前端问答

文章标签详解

本文主要和大家分享微信小程序列表开发详解，主要以代码的形式和大家分享，希望能帮助到大家。

一.知识点

(一).列表渲染 wx:for

tip:wx:for=“array”可以等于参数名，在js中调用Page({ data:{array: [{name: '小李'},{ name: '小高'}]} })，获取值；也可以直接把wx:for="{{[1, 2, 3]}}"，把值放在上面

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

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

<view>  {{index}}: {{item.message}}</view>

var app = getApp()Page({    data:{      items: [{        message: 'foo',      },{        message: 'bar'      }]    }})

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

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

<view>  {{idx}}: {{itemName.name}}</view>

var app = getApp()Page({    data:{      array: [{        name: '小李',      },{        name: '小高'      }]    }})

3.wx:for也可以嵌套

<view>  	<view>    <view>       {{i}} * {{j}} = {{i * j}}    </view> 	</view></view>

都不需要js

（二）.block wx:for

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

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

var app = getApp()Page({    data:{      array: [{        name: '小李',      },{        name: '小高'      }]    }})

(三).wx:key

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

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

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

二.案例

1.用户中心列表

<!--list.wxml--><block><view><view><image></image></view><view><view> {{item.text}} </view></view><view>{{item.unreadNum}}</view><view></view></view></block>

/**list.wxss**/.weui_cell {position: relative;display: flex;padding: 15px;-webkit-box-align: center;-ms-flex-align: center;align-items: center;border-bottom: 1px solid #dadada;}.weui_cell_hd {display: inline-block;width: 20px;margin-right: 5px;}.weui_cell_hd image {width: 100%;height: 20px;vertical-align: -2px;}.weui_cell_bd {display: inline-block;}.weui_cell_bd_p {font-size: 14px;color: #939393;}.badge {position: absolute;top: 18px;right: 40px;width: 15px;height: 15px;line-height: 15px;background: #ff0000;color: #fff;border-radius: 50%;text-align: center;font-size: 8px;}.with_arrow {position: absolute;top: 18px;right: 15px;width: 15px;height: 15px;background-image: url(../../dist/images/icon-arrowdown.png);background-repeat: no-repeat;background-size: 100% 100%;}

//list.jsvar app = getApp()Page( {  data: {    userInfo: {},    userListInfo: [ {      icon: '../../dist/images/iconfont-dingdan.png',      text: '我的订单',      isunread: true,      unreadNum: 2    }, {        icon: '../../dist/images/iconfont-card.png',        text: '我的代金券',        isunread: false,        unreadNum: 2      }, {        icon: '../../dist/images/iconfont-icontuan.png',        text: '我的拼团',        isunread: true,        unreadNum: 1      }, {        icon: '../../dist/images/iconfont-shouhuodizhi.png',        text: '收货地址管理'      }, {        icon: '../../dist/images/iconfont-kefu.png',        text: '联系客服'      }, {        icon: '../../dist/images/iconfont-help.png',        text: '常见问题'      }]  },  onLoad: function() {    var that = this    //调用应用实例的方法获取全局数据    app.getUserInfo( function( userInfo ) {      //更新数据      	that.setData( {        	userInfo: userInfo     	 })    })  }})

文章推荐

微信小程序列表开发详解

揭秘：魏则西离去真正的原因（派代网）

拒绝做微商被屏蔽拉黑，方法我有！（派代网）

【派代&amp;生意参谋电商论剑征文大赛】重磅！不看江湖地位，只论技法高下，等你来战！（）

寻洲：微商警戒线，你知道几个？

拒绝做微商被屏蔽拉黑，方法我有！（）

【派代&生意参谋电商论剑征文大赛】重磅！不看江湖地位，只论技法高下，等你来战！（）