微信小程序-遍历数组的单选多选
发布时间：2019-12-16 21:35:20作者：admin点击：
作者：疯了镜子，来自原文地址
首先 微信小程序刚刚出现
但很多客户都想要做小程序。 最近做了一个小程序的项目 踩了不少的坑 但网上相关的资料很少，这些坑都是自己一个一个的踩过来的。 现在分享一些填坑的经验 希望大家工作顺利。有写的不恰当不对的地方 欢迎留言或给我发邮件。
123456789
单选
{{box.name}} {{box.name}}
12345678910111213141516171819202122232425262728293031323334
.item { padding-top: 15%; margin-top: 5%; position: relative; display: -webkit-flex;}.item p { position: absolute; color: #adadad; top: 10%; left: 10%;}.item view { margin: 5%; flex: 1;}.box { width: 150rpx; height: 150rpx; text-align: center; padding-top: 35%; border: 1px solid black; border-radius: 4px; box-sizing: border-box;}.box_choose { background-color: #4889fe; color: white; border-color: white;}123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
Page({ data: { box: [ { name: 'box1-1', id: 0, class: '' }, { name: 'box1-2', id: 1, class: '' }, { name: 'box1-3', id: 2, class: '' } ], box2: [ { name: 'box2-1', id: 0, class: '' }, { name: 'box2-2', id: 1, class: '' }, { name: 'box2-3', id: 2, class: '' } ], choose: -1, choose2: -1 }, onLoad: function (options) { // 页面初始化 options为页面跳转所带来的参数 var that = this; box2 = that.data.box2; // console.log(box); }, onReady: function () { // 页面渲染完成 wx.setNavigationBarTitle({ title: '选择', success: function (res) { // success } }) }, onShow: function () { // 页面显示 }, onHide: function () { // 页面隐藏 }, onUnload: function () { // 页面关闭 }, choose: function (evnet) { console.log(event.data.msg.data.data.data.currentTarget.dataset.index); // var index = event.data.msg.data.data.data.currentTarget.dataset.index; var that = this; if (event.data.msg.data.data.data.currentTarget.dataset.index == that.data.choose) { that.setData({ choose: -1 }); } else { that.setData({ choose: event.data.msg.data.data.data.currentTarget.dataset.index }); } }}) 
