先上效果:
wxml:
<view class='list_item' style='margin:0;'>
<text>PPT需要speech draft</text>
<view class='switch' bindtap='switchFirst'>
<view class='switch_bar' style="{{switch_first?'background-color:#B6D2DB;':''}}"></view>
<view class='switch_point' style="{{switch_first?'right:25rpx;':'right:80rpx;'}}"></view>
</view>
</view>
wcss:
.list_item{
display: flex;
justify-content: space-between;
align-items: center;
margin:0 25rpx;
width:700rpx;
font-size: 30rpx;
color: rgb(79,79,79);
padding: 28rpx 0;
border-bottom:1px solid rgb(209,209,209);
}
.switch{
width: 120rpx;
height: 50rpx;
display: flex;
align-items: center;
}
.switch_bar{
width: 70rpx;
height: 20rpx;
background-color: #E5E5E5;
border-radius: 10rpx;
box-shadow: 0 0 5rpx #bbb inset;
}
.switch_point{
width: 40rpx;
height: 40rpx;
border-radius: 100%;
background-color: #88C7DB;
position: relative;
box-shadow: 0 0 20rpx #B6D2DB;
}
js:
Page({
data: {
switch_first: 0,
switch_second: 0
},
switchFirst:function(e){
var switch_first = this.data.switch_first;
this.setData({
switch_first:!switch_first
})
},
switchSecond: function (e) {
var switch_second = this.data.switch_second;
this.setData({
switch_second :!switch_second
})
}
})