微信小程序中列表开发的示例分析
这篇文章将为大家详细讲解有关微信小程序中列表开发的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创新互联于2013年创立,先为望花等服务建站,望花等地企业,进行企业商务咨询服务。为望花企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
一.知识点
(一).列表渲染 wx:for
tip:wx:for=“array”可以等于参数名,在js中调用 Page({ data:{ array: [{name: '小李'},{ name: '小高'}]} }),获取值;也可以直接把wx:for="{{[1, 2, 3]}}",把值放在上面
1.在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item
{{index}}: {{item.message}}
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可以指定数组当前下标的变量名:
{{idx}}: {{itemName.name}}
var app = getApp() Page({ data:{ array: [{ name: '小李', },{ name: '小高' }] } })
3.wx:for也可以嵌套
{{i}} * {{j}} = {{i * j}}
都不需要js
(二).block wx:for
类似block wx:if,也可以将wx:for用在
{{index}}:{{item.name}}
var app = getApp() Page({ data:{ array: [{ name: '小李', },{ name: '小高' }] } })
(三).wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 中的输入内容,
字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
保留关键字 *this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字,如:
如不提供 wx:key,会报一个 warning, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。
二.案例
1.用户中心列表
{{item.text}} {{item.unreadNum}}
/**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.js var 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 }) }) } })
关于“微信小程序中列表开发的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
当前题目:微信小程序中列表开发的示例分析
文章来源:http://pwwzsj.com/article/pojghs.html