資訊專欄INFORMATION COLUMN
很多知識就是在開發(fā)中讓我們更加努力學(xué)習(xí)，本篇文章主要就是講在微信小程序中實(shí)現(xiàn)多項(xiàng)選擇器checkbox。
第一的話就是我們的相關(guān)的布局文件：
<view class="container">
<view class="page-body">
<view class="page-section page-section-gap">
<view class="page-section-title">默認(rèn)樣式</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({
// 在我們的這個(gè)位置的話填充我們的相關(guān)的數(shù)據(jù)
onShareAppMessage(){
// 在我們的這個(gè)位置的話就是闖進(jìn)我們的相關(guān)的方法
return{
title: 'checkbox',
path: 'pages/checkbox/checkbox'
}
},
// 然后的話就是填充我們的相關(guān)的數(shù)據(jù)：
data:{
// 然后的話在我們的這個(gè)位置的話就是設(shè)置我們的相關(guān)的方法
items:[
{value:'usa', name:'影響力'},
{ value: 'usa', name: '影響力' },
{ value: 'usa', name: '韭菜的自我修養(yǎng)' },
{ value: 'usa', name: '你的名字' },
{ value: 'usa', name: '怪誕行為學(xué)' ,checked: 'true'},
{ value: 'usa', name: '教父' },
{ value: 'usa', name: '經(jīng)濟(jì)學(xué)原理' },
{ value: 'usa', name: '三國演義' },
{ value: 'usa', name: '絕對成交' },
{ value: 'usa', name: '行為經(jīng)濟(jì)學(xué)講義' },
{ value: 'usa', name: '黑天鵝' },
{ value: 'usa', name: '灰犀牛' },
]
},
// 在我們的額這個(gè)位置的話就是設(shè)置我們的相關(guān)的方法
// 在我們的這個(gè)位置的話就是創(chuàng)建一個(gè)有參數(shù)的構(gòu)造方法
checkboxChange(e){
// 在我們的這位置的話就是在我們的控制臺中輸出我們需要的東西
console.log('checkbox發(fā)生change事件，攜帶value值為：', e.detail.value)
const items = this.data.items
const values = e.detail.value
// 然后的話在我們的這個(gè)位置使用我們的for循環(huán)來設(shè)置創(chuàng)建我們的相關(guān)的東西
for (let i = 0, lenI = items.length; i < lenI; ++ i){
// 然后的話就是循環(huán)遍歷到后就獲取到我們的東西
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
}
}
}
// 然后的話在我們的下面的這個(gè)位置的話就是設(shè)置我們的相關(guān)的方法
this.setData({
items
})
}
})全部內(nèi)容已講述完畢，歡迎大家關(guān)注更多后續(xù)精彩內(nèi)容。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/128369.html
摘要：小程序文檔上說目前支持的選擇器有選擇器樣例樣例描述選擇所有擁有的組件選擇擁有的組件選擇所有組件選擇所有文檔的組件和所有的組件在組件后邊插入內(nèi)容在組件前邊插入內(nèi)容在實(shí)踐中我發(fā)現(xiàn)除了文檔上說的幾種選擇器經(jīng)過測試發(fā)現(xiàn)其實(shí)還有幾種支持的選擇器沒有列 小程序文檔上說 目前支持的選擇器有： 選擇器 樣例 樣例描述 .class .intro 選擇所有擁有 class=intro 的組件 ...
摘要：小程序文檔上說目前支持的選擇器有選擇器樣例樣例描述選擇所有擁有的組件選擇擁有的組件選擇所有組件選擇所有文檔的組件和所有的組件在組件后邊插入內(nèi)容在組件前邊插入內(nèi)容在實(shí)踐中我發(fā)現(xiàn)除了文檔上說的幾種選擇器經(jīng)過測試發(fā)現(xiàn)其實(shí)還有幾種支持的選擇器沒有列 小程序文檔上說 目前支持的選擇器有： 選擇器 樣例 樣例描述 .class .intro 選擇所有擁有 class=intro 的組件 ...
在工作中效率要求是很高的，現(xiàn)在就在頻繁用到復(fù)選框，我們自己來寫了個(gè)組件，增加其復(fù)用性，提高效率。 先看效果圖： 這樣只需提交后得到一個(gè)選中項(xiàng)的id組成的數(shù)組 下邊直接上代碼： 代碼地址為：components/checkGrop/checkGrop wxml: <formbindsubmit="formSubmit"> <viewclass...
摘要：第一步搭開發(fā)環(huán)境首先，我們需要在本地搭建好微信小程序的開發(fā)環(huán)境。在微信小程序中，所有的網(wǎng)絡(luò)請求受到嚴(yán)格限制，不滿足條件的域名和協(xié)議無法請求。第五步配置微信小程序云端示例鏡像中，已經(jīng)部署好了，但是還需要在下修改配置中的域名證書私鑰。 「小程序」這個(gè)劃時(shí)代的產(chǎn)品發(fā)布快一周了，互聯(lián)網(wǎng)技術(shù)人都在摩拳擦掌，躍躍欲試。可是小程序目前還在內(nèi)測，首批只發(fā)放了 200 個(gè)內(nèi)測資格（淚流滿面）。本以為沒有...
閱讀 570·2023-03-27 18:33
閱讀 761·2023-03-26 17:27
閱讀 658·2023-03-26 17:14
閱讀 612·2023-03-17 21:13
閱讀 546·2023-03-17 08:28
閱讀 1836·2023-02-27 22:32
閱讀 1330·2023-02-27 22:27
閱讀 2212·2023-01-20 08:28
