微信小程序切換按鈕或者view的選中狀態(tài)
2018-09-14
導(dǎo)讀:微信小程序切換按鈕或者view的選中狀態(tài) ,實現(xiàn)非常簡單,通過一個簡單的判斷當(dāng)前data中的選中值,點(diǎn)擊按鈕時更新data值,重新渲染頁面。 ...
實現(xiàn)非常簡單,通過一個簡單的判斷當(dāng)前data中的選中值,點(diǎn)擊按鈕時更新data值,重新渲染頁面。
index.wxml文件
<view class="switch-type"> <view class="btn {{currentSelectTripType == 'pinche' ? 'active' : ''}}" bindtap='selectedPinche' data-id='pinche'>拼車</view> <view class="btn {{currentSelectTripType == 'baoche' ? 'active' : ''}}" bindtap='selectedBaoche' data-id='baoche'>包車</view> </view>
index.js文件
Page({ data: {~~~~ currentSelectTripType: 'pinche', }, // 更新data 切換選中狀態(tài) selectedPinche: function (e) { this.setData({ currentSelectTripType: e.currentTarget.dataset.id }) }, selectedBaoche: function(e) { this.setData({ currentSelectTripType: e.currentTarget.dataset.id }) }, })
附上一個簡單的樣式
index.wxss
.switch-type { display: flex; } .switch-type .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .switch-type .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } .switch-type .btn { background: #dfdfdf; padding: 10rpx 40rpx; } .switch-type .btn.active { border: 2rpx solid #007bff; background: #fff; }
第二部分:如何開通一個小商店