微信小程序多項(xiàng)選擇器checkbox
本文實(shí)例為大家分享了微信小程序多項(xiàng)選擇器checkbox的具體代碼,供大家參考,具體內(nèi)容如下
第一的話就是我們的相關(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: '絕對(duì)成交' }, ? ? { 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){ ? ? // 在我們的這位置的話就是在我們的控制臺(tái)中輸出我們需要的東西 ? ? 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)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
PHP讀取遠(yuǎn)程txt文檔到數(shù)組并實(shí)現(xiàn)遍歷
這篇文章主要介紹了PHP讀取遠(yuǎn)程txt文檔到數(shù)組并實(shí)現(xiàn)遍歷,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08小程序?qū)崿F(xiàn)發(fā)表評(píng)論功能
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)發(fā)表評(píng)論功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-07Echarts橫向堆疊柱狀圖和markLine實(shí)例詳解
一些柱形圖在數(shù)據(jù)量比較多的時(shí)候,橫向排列受到擠壓,導(dǎo)致柱形圖,變的非常細(xì),影響整體的效果,所以應(yīng)該將柱形圖堆疊起來,這樣就會(huì)好很多,下面這篇文章主要給大家介紹了關(guān)于Echarts橫向堆疊柱狀圖和markLine的相關(guān)資料,需要的朋友可以參考下2022-06-06微信開發(fā)之調(diào)起攝像頭、本地展示圖片、上傳下載圖片實(shí)例
這篇文章主要介紹了微信開發(fā)之調(diào)起攝像頭、本地展示圖片、上傳下載圖片實(shí)例,具有一定的參考價(jià)值有興趣的可以了解一下。2016-12-12Textarea輸入字?jǐn)?shù)限制實(shí)例(兼容iOS&安卓)
下面小編就為大家?guī)硪黄猅extarea輸入字?jǐn)?shù)限制實(shí)例(兼容iOS&安卓)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07js實(shí)現(xiàn)QQ面板拖拽效果(慕課網(wǎng)DOM事件探秘)(全)
這篇文章主要為大家詳細(xì)介紹了QQ面板拖拽效果,探秘慕課網(wǎng)DOM事件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09SpringMVC restful 注解之@RequestBody進(jìn)行json與object轉(zhuǎn)換
這篇文章主要介紹了SpringMVC restful 注解之@RequestBody進(jìn)行json與object轉(zhuǎn)換的相關(guān)資料,需要的朋友可以參考下2015-12-12