微信小程序多項選擇器checkbox演示示例

3403771864 發布于2022-11-16 22:39 / 600人閱讀

　　很多知識就是在開發中讓我們更加努力學習，本篇文章主要就是講在微信小程序中實現多項選擇器checkbox。

　　第一的話就是我們的相關的布局文件：

　　<view class="container">
　　<view class="page-body">
　　<view class="page-section page-section-gap">
　　<view class="page-section-title">默認樣式</view>
　　<label class="checkbox">
　　<checkbox value="cb" checked="true"/>選中
　　</label>
　　<label class="checkbox">
　　<checkbox value="cb" />未選中
　　</label>
　　</view>
　　<view class="page-section">
　　<view class="page-section-title">推薦展示樣式</view>
　　<view class="weui-cells weui-cells_after-title">
　　<checkbox-group bindchange="checkboxChange">
　　<label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="{{item.value}}">
　　<view class="weui-cell__hd">
　　<checkbox value="{{item.value}}" checked="{{item.checked}}"/>
　　</view>
　　<view class="weui-cell__bd">{{item.name}}</view>
　　</label>
　　</checkbox-group>
　　</view>
　　</view>
　　</view>
　　</view>

　　然后的話就是我們的小程序的邏輯部分：

　　Page({
　　// 在我們的這個位置的話填充我們的相關的數據
　　onShareAppMessage(){
　　// 在我們的這個位置的話就是闖進我們的相關的方法
　　return{
　　title: 'checkbox',
　　path: 'pages/checkbox/checkbox'
　　}
　　},
　　// 然后的話就是填充我們的相關的數據：
　　data:{
　　// 然后的話在我們的這個位置的話就是設置我們的相關的方法
　　items:[
　　{value:'usa', name:'影響力'},
　　{ value: 'usa', name: '影響力' },
　　{ value: 'usa', name: '韭菜的自我修養' },
　　{ value: 'usa', name: '你的名字' },
　　{ value: 'usa', name: '怪誕行為學' ,checked: 'true'},
　　{ value: 'usa', name: '教父' },
　　{ value: 'usa', name: '經濟學原理' },
　　{ value: 'usa', name: '三國演義' },
　　{ value: 'usa', name: '絕對成交' },
　　{ value: 'usa', name: '行為經濟學講義' },
　　{ value: 'usa', name: '黑天鵝' },
　　{ value: 'usa', name: '灰犀牛' },
　　]
　　},
　　// 在我們的額這個位置的話就是設置我們的相關的方法
　　// 在我們的這個位置的話就是創建一個有參數的構造方法
　　checkboxChange(e){
　　// 在我們的這位置的話就是在我們的控制臺中輸出我們需要的東西
　　console.log('checkbox發生change事件，攜帶value值為：', e.detail.value)
　　const items = this.data.items
　　const values = e.detail.value
　　// 然后的話在我們的這個位置使用我們的for循環來設置創建我們的相關的東西
　　for (let i = 0, lenI = items.length; i < lenI; ++ i){
　　// 然后的話就是循環遍歷到后就獲取到我們的東西
　　items[i].checked = false
　　for (let j = 0, lenJ = values.length; j < lenJ; ++j){
　　if (items[i].value === values[j]){
　　items[i].checked = true
　　break
　　}
　　}
　　}
　　// 然后的話在我們的下面的這個位置的話就是設置我們的相關的方法
　　this.setData({
　　items
　　})
　　}
　　})

　　全部內容已講述完畢，歡迎大家關注更多后續精彩內容。

云服務器 GPU云服務器微信小程序支付微信小程序部署微信小程序搭建微信小程序環境

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/128369.html

微信小程序文檔沒寫支持, 但是實際支持的選擇器有哪些?

摘要：小程序文檔上說目前支持的選擇器有選擇器樣例樣例描述選擇所有擁有的組件選擇擁有的組件選擇所有組件選擇所有文檔的組件和所有的組件在組件后邊插入內容在組件前邊插入內容在實踐中我發現除了文檔上說的幾種選擇器經過測試發現其實還有幾種支持的選擇器沒有列小程序文檔上說目前支持的選擇器有：選擇器樣例樣例描述 .class .intro 選擇所有擁有 class=intro 的組件 ...

qpwoeiru96 2019-08-30 15:44 評論0 收藏0
微信小程序文檔沒寫支持, 但是實際支持的選擇器有哪些?

摘要：小程序文檔上說目前支持的選擇器有選擇器樣例樣例描述選擇所有擁有的組件選擇擁有的組件選擇所有組件選擇所有文檔的組件和所有的組件在組件后邊插入內容在組件前邊插入內容在實踐中我發現除了文檔上說的幾種選擇器經過測試發現其實還有幾種支持的選擇器沒有列小程序文檔上說目前支持的選擇器有：選擇器樣例樣例描述 .class .intro 選擇所有擁有 class=intro 的組件 ...

miguel.jiang 2019-08-26 10:48 評論0 收藏0
微信小程序復選框組件使用演示示例

　　在工作中效率要求是很高的，現在就在頻繁用到復選框，我們自己來寫了個組件，增加其復用性，提高效率。　　先看效果圖：　　這樣只需提交后得到一個選中項的id組成的數組　　下邊直接上代碼：　　代碼地址為：components/checkGrop/checkGrop　　wxml:　　<formbindsubmit="formSubmit"> 　　<viewclass...

3403771864 2022-11-06 18:16 評論0 收藏0
一個小時快速搭建微信小程序

摘要：第一步搭開發環境首先，我們需要在本地搭建好微信小程序的開發環境。在微信小程序中，所有的網絡請求受到嚴格限制，不滿足條件的域名和協議無法請求。第五步配置微信小程序云端示例鏡像中，已經部署好了，但是還需要在下修改配置中的域名證書私鑰。「小程序」這個劃時代的產品發布快一周了，互聯網技術人都在摩拳擦掌，躍躍欲試。可是小程序目前還在內測，首批只發放了 200 個內測資格（淚流滿面）。本以為沒有...

izhuhaodev 2019-08-20 11:23 評論0 收藏0