提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

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

组件微信程序 自定义 多选
2023-09-11 14:17:23 时间
<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{
width: 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{
width: 100%;
height: 88rpx;
padding: 0 24rpx;
">rgba(255,255,255,0.1);
margin-top: 20rpx;
}
.sp-item image{
width: 14rpx;
height: 224rpx;
}
.btn{
width: 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;
width: 100%;
border-radius: 50rpx;
color: white;
">#14a1fd;
box-shadow: 0 0 4rpx 1rpx rgba(20,161,253,0.7)
}

.select-only{
width: 100%;
display: flex;
justify-content: space-between ;
align-items: center;
margin-top: 30rpx;
}
.so-3{
width: 36rpx;
height: 36rpx;
border-radius: 50%;
border: 1px solid #67C9C5;
margin-right: 20rpx;
}
.so-2{
width: 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
})
},
 

相关文章