微信小程序组件 自定义多选

<view class='back'></view>

<view class="container">

<!-- 睡眠记录 -->

<view class='sp-list'>

<view class='sp-item acl255 flexba f30'>

<view class='item-lf'>

<text>药品名称</text>

</view>

<view class='item-rt flexca'>

<text>佳乐定</text>

<image mode='widthFix' class='img-w ml20' src='../../../../imgs/index/right.png'></image>

</view>

</view>

<view class='sp-item acl255 flexba f30'>

<view class='item-lf flexa'>

<view class="so-3 flexca {{selectIndex[0].sureid?'active1':''}}" data-selectIndex='0' bindtap='selectFn'>

<view class="so-2 {{selectIndex[0].sureid?'active2':''}}"></view>

</view>

<text>早上用量</text>

</view>

<view class='item-rt flexca'>

<text>佳乐定</text>

<image mode='widthFix' class='img-w ml20' src='../../../../imgs/index/right.png'></image>

</view>

</view>

<view class='sp-item acl255 flexba f30'>

<view class='item-lf flexa'>

<view class="so-3 flexca {{selectIndex[1].sureid?'active1':''}}" data-selectIndex='1' bindtap='selectFn'>

<view class="so-2 {{selectIndex[1].sureid?'active2':''}}"></view>

</view>

<text>中午用量</text>

</view>

<view class='item-rt flexca'>

<text>佳乐定</text>

<image mode='widthFix' class='img-w ml20' src='../../../../imgs/index/right.png'></image>

</view>

</view>

<view class='sp-item acl255 flexba f30'>

<view class='item-lf flexa'>

<view class="so-3 flexca {{selectIndex[2].sureid?'active1':''}}" data-selectIndex='2' bindtap='selectFn'>

<view class="so-2 {{selectIndex[2].sureid?'active2':''}}"></view>

</view>

<text>晚上用量</text>

</view>

<view class='item-rt flexca'>

<text>佳乐定</text>

<image mode='widthFix' class='img-w ml20' src='../../../../imgs/index/right.png'></image>

</view>

</view>

<view class='sp-item acl255 flexba f30'>

<view class='item-lf flexa'>

<view class="so-3 flexca {{selectIndex[3].sureid?'active1':''}}" data-selectIndex='3' bindtap='selectFn'>

<view class="so-2 {{selectIndex[3].sureid?'active2':''}}"></view>

</view>

<text>睡前用量</text>

</view>

<view class='item-rt flexca'>

<text>佳乐定</text>

<image mode='widthFix' class='img-w ml20' src='../../../../imgs/index/right.png'></image>

</view>

</view>

</view>

<!-- 确定按钮 -->

<view class='btn flexca abl'>

<text class='f34 acl255'>确定</text>

</view>

</view>

 

 

 

css

.back{

100%;

height: 100%;

position: fixed;

left: 0;

bottom: 0;

z-index: -1;

background-image:linear-gradient( 0deg, rgb(185,199,221) 0%, rgb(110,123,144) 61%, rgb(35,47,67) 100%);

}

/* 睡眠记录 */

.sp-item{

100%;

height: 88rpx;

padding: 0 24rpx;

">rgba(255,255,255,0.1);

margin-top: 20rpx;

}

.sp-item image{

14rpx;

height: 224rpx;

}

.btn{

480rpx;

height: 80rpx;

border-radius: 41rpx;

margin: 0 auto;

margin-top: 100rpx;

box-shadow: 0 0 5rpx 5rpx rgba(35,47,67,0.3);

}

.userperson{

margin-top: 40rpx;

}

.userperson>view:first-child{

color: #14a1fd;

}

button{

margin-top: 70rpx;

100%;

border-radius: 50rpx;

color: white;

">#14a1fd;

box-shadow: 0 0 4rpx 1rpx rgba(20,161,253,0.7)

}

.select-only{

100%;

display: flex;

justify-content: space-between ;

align-items: center;

margin-top: 30rpx;

}

.so-3{

36rpx;

height: 36rpx;

border-radius: 50%;

border: 1px solid #67C9C5;

margin-right: 20rpx;

}

.so-2{

24rpx;

height: 24rpx;

border-radius: 50%;

">transparent;

}

.active1{

border: 1px solid #67C9C5;

}

.active2{

">#67C9C5;

}

 

 

 

data:

selectIndex: [

{ sureid: false },

{ sureid: false },

{ sureid: false },

{sureid:false},

],

 

// 多选

selectFn: function (e) {

let selectIndex = this.data.selectIndex;

let index = e.currentTarget.dataset.selectindex;

selectIndex[index].sureid = !selectIndex[index].sureid;

// console.log(selectIndex)

this.setData({

selectIndex: selectIndex

})

},