實現(xiàn)非常簡單,通過一個簡單的判斷當前data中的選中值,點擊按鈕時更新data值,重新渲染頁面。
index.wxml文件
實現(xiàn)非常簡單,通過一個簡單的判斷當前data中的選中值,點擊按鈕時更新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; } |
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; } |
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)