小程序单选

单选其实很简单 ，用最简洁的话来说就是，你当前点击的这个元素的序号等于你循环出来数据的index。

今天写其中一种，个人认为简洁的。

js:

data:{

list:["猪肉饭","卤肉饭","蛋包饭"],//

selectIndex:""

}

这里我们把list循环出来的序列号传入小程序特有的data中，

html:

<view data-selectIndex="{{index}}"  wx:for="{{list}}">item</view>

由于鼠标点击时间存储了当前点击时我们已经将序列号存储进了data里面，所以此处这样获取到我们要的序号

js：

select(e){

let that = this;

let index = e.currentTarget.dataset.selectindex;

that.setData({

selectIndex:index

})

}

最后要在页面上展示出来我们的单选效果,我们只需要判断当前点击的元素是否等于循环出来的index就可以了，这里的on是我们写好的选中样式

html:

<view class="{{selectIndex==index?"on":""}}" data-selectIndex="{{index}}" wx:for="{{list}}" bindtap="select">item</view>