可以直接免费观看的AV网站

2020年12月23日

微信小程序切图 wx:for循环 以及点击事件


来自官方的代码演示,很直观易懂

打开微信开发者文档,在框架部分的视图层–》wxml–》列表渲染中可以看到官方给出的for循环实例,在实例中 可以看到下面相关说明。

默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item;使用 wx:for-item 可以指定数组当前元素的变量名,使用 wx:for-index 可以指定数组当前下标的变量名。

test.wxml

<view wx:for=”{{array}}”>
{{index}}: {{item.message}}
</view>
<view wx:for=”{{array}}” wx:for-index=”idx” wx:for-item=”itemName”>
{{idx}}: {{itemName.message}}
</view>

test.js

Page({
data: {
array: [
{message: ‘foo’,},
{message: ‘bar’}
]
}
})
来自切图网项目的代码片段
<div class=”item {{arrayindex==index ? ‘on’ : ”}}” wx:for=”{{array}}” data-current=”{{index}}” catchtap=”tap”>
<text>{{item}}</text>
<div class=”check”>
<image src=”../../assets/images/check_nor.png” class=”off”/>
<image src=”../../assets/images/check_select.png” class=”on”/>
</div>
</div>
js代码

data: {

//普通选择器
array: [‘查看客人手机号码’,’开单’, ‘收银’, ‘收银’, ‘查看门店业绩数据’,’同步启用管理端’],
arrayindex: 0,//默认显示位置

},
tap:function(e){
var current=e.currentTarget.dataset.current;//获取到绑定的数据
//改变menuTapCurrent的值为当前选中的menu所绑定的数据
this.setData({
arrayindex:current
});

},

本文由专业的WEB前端外包公司-切图网原创,转载请保留版权( WEB前端开发外包gabrious.com切图网始于2007年,提供高品质的前端开发服务、前端外包、切图外包。欢迎来电咨询!热线:027-81777732、13343477732

标签:,