微信小程式-swicth改變樣式
阿新 • • 發佈:2019-02-11
先上效果:
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 }) } })