微信小程式 自定義單選複選按鈕組的實現(用於實現購物車產品列表功能)
阿新 • • 發佈:2018-12-07
(一)單選按鈕組
模型圖如下:
index.js
Page({ data: { parameter: [{ id: 1, name: '銀色' }, { id: 2, name: '白色' },{ id: 3, name: '黑色' }],//模擬商品引數資料,如果是線上版本需要自行發起request請求 }, onLoad: function (options) { this.data.parameter[0].checked = true; this.setData({ parameter:this.data.parameter, })//預設parameter陣列的第一個物件是選中的 }, // 引數點選響應事件 parameterTap:function(e){//e是獲取e.currentTarget.dataset.id所以是必備的,跟前端的data-id獲取的方式差不多 var that=this var this_checked = e.currentTarget.dataset.id var parameterList = this.data.parameter//獲取Json陣列 for (var i = 0; i < parameterList.length;i++){if (parameterList[i].id == this_checked){ parameterList[i].checked = true;//當前點選的位置為true即選中 } else{ parameterList[i].checked = false;//其他的位置為false } } that.setData({ parameter: parameterList }) } })
index.wxml
<view class='fwb fz-28 mgt-16 mgb-10'>規格</view> <view class='parameter-wrap'> <block wx:for="{{parameter}}" wx:key="parameter"> <text class='parameter-info text-over {{item.checked?"checked_parameter":""}}' data-id='{{item.id}}' bindtap='parameterTap'>{{item.name}}</text> </block> </view>
index.wxss
.checked_parameter{ background: rebeccapurple; padding: 3px; border-radius: 5px; color: #fff; }
Tips:此處的{{item.checked?”checked_parameter”:”“}}為三元選擇器,即通過checked判斷當前是否為選中樣式,而後進行樣式的新增checked_parameter。
(二)多選按鈕組
模型圖如下:
cartList.js
Page({ data:{ CartList:[],//做空處理,如果購物車為空後端的值沒有改變,容易產生報錯 }, onLoad: function () { // 獲取購物車請求 var that = this; wx.request({ url: request_getCartList,//向後端發起請求,此處的是get的方式,如需要ajax請參照本站內的相關文章 data: { "session3rd": userid, }, success: function (res) { if (res.data.code == -2) { that.setData({ CartList: [] }) } if(res.data.code==1){ that.setData({ CartList: list }) } } }) }, // 多選 chooseOs: function (event) { for (var i = 0; i < this.data.CartList.length; i++) { if (event.currentTarget.id == this.data.CartList[i].id) { if (this.data.CartList[i].checked == true) { this.data.CartList[i].checked = false; var CartList = this.data.CartList; this.setData({ CartList//重定義CartList,使購物車的樣式實現區域性重新整理 }) } else { this.data.CartList[i].checked = true; var CartList = this.data.CartList; this.setData({ CartListt//重定義CartList,使購物車的樣式實現區域性重新整理 }) } } } }, })
cartList.wxml
<block wx:for="{{CartList}}" wx:key=""> <view class="order-out user-shadow mgb-20 nowrap"> <view class="check-btn" catchtap='chooseOs' id="{{item.id}}"> <image class="absoult-v" src="{{imgSrc}}{{item.checked?'type_1':'type_0'}}.png" mode="widthFix"></image> </view> </view> </block>
Tips:前端頁面通過catchtap的事件捕捉的方式,呼叫chooseOs的方法,獲取當前點選物件的id即id=”{{item.id}}”,然後對選中的事件新增樣式this.data.CartList[i].checked = true;,對未選中的事件刪除樣式this.data.CartList[i].checked = false;
(三)複選拓展-全選全不選
cart.xml
<view class="all-btn" bindtap='allCheckTap' wx:if="{{!checked}}"> <image src="{{imgSrc}}{{checked?'type_1':'type_0'}}.png" mode="widthFix"></image> <text>全選</text> </view> <view class="all-btn" bindtap='allCheckTap' wx:if="{{checked}}"> <image src="{{imgSrc}}{{checked?'type_1':'type_0'}}.png" mode="widthFix"></image> <text>全不選</text> </view>
Tips:此處的‘全選’和‘全不選’沒有合併,需要小碼農們自行整合。
cartList.js
// 全選按鈕 allCheckTap: function () { this.setData({ checked: !this.data.checked, }) if (this.data.checked) { for (var i = 0; i < this.data.CartList.length; i++) { if (this.data.CartList[i].checked !== true) { this.data.CartList[i].checked = true; var CartList = this.data.CartList; this.setData({ CartList }) } } } else { for (var i = 0; i < this.data.CartList.length; i++) { if (this.data.CartList[i].checked == true) { this.data.CartList[i].checked = false; var CartList = this.data.CartList; this.setData({ CartList }) } } } },
tips:全選跟全部不選的邏輯比較簡單就是,將所有所有的checked迴圈遍歷this.data.CartList[i].checked == true或false,然後通過this.setData({CartList})重新定義一下,實現區域性重新整理。
轉 : https://blog.csdn.net/qq_38209578/article/details/78810981