微信小程序復(fù)選框組件使用詳解
更新時(shí)間：2022年07月11日 11:18:27 作者：NAMECZ
這篇文章主要為大家詳細(xì)介紹了微信小程序復(fù)選框組件使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
在工作中頻繁用到復(fù)選框，于是自己寫了個(gè)組件，增加其復(fù)用性，提高效率。
先看效果圖：
提交后得到一個(gè)選中項(xiàng)的id組成的數(shù)組
下邊直接上代碼：
代碼地址為：components/checkGrop/checkGrop
wxml:
<form bindsubmit="formSubmit">
? <view class='content'>
? <!-- 一級(jí)菜單 -->
? ? <scroll-view class='scrollLeft' scroll-y>
? ? ? <block wx:for="{{list}}" wx:key="item">
? ? ? ? <view class="leftBox" catchtap='ontap' data-index='{{index}}' style='{{n==index?"border-left:8rpx solid #1aad16;color:#1aad16":""}}'>
? ? ? ? ? {{item.istitle}}
? ? ? ? ? <view class='num' hidden="{{checked[index].length>0?false:true}}">
? ? ? ? ? ? <text>{{allNum[index]?allNum[index]:(checked[index].length>0?checked[index].length:0)}}</text>
? ? ? ? ? </view>
? ? ? ? </view>
? ? ? </block>
? ? </scroll-view>
? ? <!-- 二級(jí)菜單 -->
? ? <scroll-view class='scrollRight' scroll-y>
? ? ? <view class="weui-cells weui-cells_after-title">
? ? ? <!-- 二級(jí)菜單中的全部選項(xiàng) -->
? ? ? ? <label class="weui-cell weui-check__label" catchtap='all'>
? ? ? ? ? <checkbox class="weui-check" value="{{childlist[n][0].value}}" checked="{{childlist[n][0].checked}}" />
? ? ? ? ? <view class="weui-cell__hd weui-check__hd_in-checkbox">
? ? ? ? ? ? <icon class="weui-icon-checkbox_circle" type="circle" size="23" wx:if="{{!childlist[n][0].checked}}"></icon>
? ? ? ? ? ? <icon class="weui-icon-checkbox_success" type="success" size="23" wx:if="{{childlist[n][0].checked}}"></icon>
? ? ? ? ? </view>
? ? ? ? ? <view class="weui-cell__bd">{{childlist[n][0].istitle}}</view>
? ? ? ? </label>
? ? ? ? <checkbox-group bindchange="checkboxChange">
? ? ? ? <!-- 二級(jí)菜單中的剩余選項(xiàng) -->
? ? ? ? ? <block wx:for="{{childlist[n]}}" wx:key="value">
? ? ? ? ? ? <label class="weui-cell weui-check__label" wx:if='{{item.istitle!="全部"}}'>
? ? ? ? ? ? ? <checkbox class="weui-check" value="{{item.id}}" checked="{{item.checked}}" />
?
? ? ? ? ? ? ? <view class="weui-cell__hd weui-check__hd_in-checkbox">
? ? ? ? ? ? ? ? <icon class="weui-icon-checkbox_circle" type="circle" size="23" wx:if="{{!item.checked}}"></icon>
? ? ? ? ? ? ? ? <icon class="weui-icon-checkbox_success" type="success" size="23" wx:if="{{item.checked}}"></icon>
? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? <view class="weui-cell__bd">{{item.istitle}}</view>
? ? ? ? ? ? </label>
? ? ? ? ? </block>
? ? ? ? </checkbox-group>
? ? ? </view>
? ? </scroll-view>
? </view>
? <view class="btn-area">
? ? <button catchtap='back'>返回</button>
? ? <button formType="submit">提交</button>
? </view>
</form>wxss:
page{
? background: #f8f8f8;
}
.content{
? position: absolute;
? top:0;
? bottom:100rpx;?
? width: 100%;
}
.scrollLeft{
? box-sizing: border-box;
? float: left;
? width: 25%;
? height: 100%;
? border-right: 1rpx solid #ddd;
? font-size: 35rpx;
}
.scrollRight{
? float: left;
? width: 75%;
? height: 100%;
}
.leftBox{
? position: relative;
? box-sizing: border-box;
? width: 100%;
? height: 100rpx;
? display: flex;
? justify-content: center;
? align-items:center;
? border-bottom: 1rpx solid #ddd;
}
.num{
? position: absolute;
? top:10rpx;
? right: 10rpx;
? width: 30rpx;
? height: 30rpx;
? display: flex;
? justify-content: center;
? align-items: center;
? background-color: #f10215;
? border-radius: 50%;
? color: white;
? font-size: 22rpx;
}
.rightBox{
? box-sizing: border-box;
? width: 100%;
}
.weui-cells {
? position: relative;
? margin-top: 1.17647059em;
? background-color: #FFFFFF;
? line-height: 1.41176471;
? font-size: 17px;
}
.weui-cells_after-title {
? margin-top: 0;
}
.weui-cell {
? padding: 10px 15px;
? position: relative;
? display: -webkit-box;
? display: -webkit-flex;
? display: flex;
? -webkit-box-align: center;
? -webkit-align-items: center;
? ? ? ? ? align-items: center;
}
.weui-check__label:active {
? background-color: #ECECEC;
}
.weui-check {
? position: absolute;
? left: -9999px;
}
.weui-check__hd_in-checkbox {
? padding-right: 0.35em;
}
.weui-icon-checkbox_circle,
.weui-icon-checkbox_success {
? margin-left: 4.6px;
? margin-right: 4.6px;
}
.weui-cell__bd {
? -webkit-box-flex: 1;
? -webkit-flex: 1;
? ? ? ? ? flex: 1;
}
.btn-area{
? position: absolute;
? bottom: 0;
? width: 100%;
? height: 100rpx;
? display: flex;
? justify-content: space-between;
? align-items: center;
? margin-top: 20rpx;
}
.btn-area>button:first-child{
? width: 30%;
? height: 80%;
? color: white;
? background-color: orange;
? display: flex;
? justify-content: center;
? align-items: center;
}
.btn-area>button:last-child{
? width: 65%;
? height: 80%;
? color: white;
? background-color: #1aad16;
? display: flex;
? justify-content: center;
? align-items: center;
}json:
{
? "component":true
}js:
Component({
? properties: {
? ? list: {
? ? ? type: Array,
? ? ? value: [],
? ? },
? ? select:{
? ? ? type: Array,
? ? ? value: [],
? ? }
? },
? data: {
? ? childlist: [],?
? ? n: 0,
? ? checked: [],
? ? allNum: [],
? },
? ready(){
? ? var that=this;
? ? var list = that.data.list;//傳遞過來的數(shù)據(jù)
? ? // console.log(list)
? ? var select = that.data.select;
? ? var checked = new Array;
? ? var allNum = [];?
? ? ? var aaa = [];
? ? ? // 檢查默認(rèn)選中狀態(tài)
? ? ? for (let i = 0; i < list.length; i++) {
? ? ? ? for (let k = 0; k < list[i].childlist.length; k++) {
? ? ? ? ? for (let j = 0; j < select.length; j++) {
? ? ? ? ? ? if (list[i].childlist[k].id == select[j]) {
? ? ? ? ? ? ? aaa = [];
? ? ? ? ? ? ? // 若某條二級(jí)數(shù)組中存在多個(gè)選中的項(xiàng)要做判斷篩選
? ? ? ? ? ? ? if (checked[i]) {
? ? ? ? ? ? ? ? // check中第i項(xiàng)如果存過值，那么將在此項(xiàng)中繼續(xù)加入值
? ? ? ? ? ? ? ? checked[i].forEach(function (item) {
? ? ? ? ? ? ? ? ? aaa.push(item);
? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? aaa.push(list[i].childlist[k]);
? ? ? ? ? ? ? ? checked[i] = aaa;
? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? // check中第i項(xiàng)沒有存過值，那么將值存入第i項(xiàng)
? ? ? ? ? ? ? ? if (list[i].childlist[k].istitle == "全部") {
? ? ? ? ? ? ? ? ? for (let s = 0; s < list[i].childlist.length; s++) {
? ? ? ? ? ? ? ? ? ? list[i].childlist[s].checked = true
? ? ? ? ? ? ? ? ? ? allNum[i] = list[i].childlist.length - 1;
? ? ? ? ? ? ? ? ? ? checked[i] = [list[i]];
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? checked[i] = [list[i].childlist[k]];
? ? ? ? ? ? ? ? }
?
? ? ? ? ? ? ? }
? ? ? ? ? ? ? list[i].childlist[k].checked = true;
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? }
? ? ? }
? ??
? ? that.setData({
? ? ? 'childlist[0]': list[0].childlist,
? ? ? list: list,
? ? ? checked: checked,
? ? ? allNum: allNum,
? ? })
? ? console.log(checked);
? ? console.log(allNum);
? },
? methods: {
? ? ontap(e) {
? ? ? var that = this;
? ? ? var n = e.currentTarget.dataset.index;
? ? ? var childlist = "childlist[" + n + "]";
? ? ? that.setData({
? ? ? ? [childlist]: that.data.list[n].childlist,
? ? ? ? n: n
? ? ? })
? ? },
? ? all() {
? ? ? var that = this;
? ? ? var n = that.data.n;
? ? ? var childlist = "childlist[" + n + "]";
? ? ? var checked = "checked[" + n + "]";
? ? ? var allNum = "allNum[" + n + "]";
? ? ? var all = "";
? ? ? var checkArr = [];
? ? ? var checkboxItems = that.data.childlist[n];
? ? ? if (checkboxItems[0].checked) {
? ? ? ? checkboxItems[0].checked = true;
? ? ? ? checkArr = [];
? ? ? } else {
? ? ? ? checkboxItems[0].checked = false;
? ? ? ? // checkArr.push(checkboxItems[0])
? ? ? ? checkArr.push(that.data.list[n])
? ? ? ? all = checkboxItems.length - 1;
? ? ? }
? ? ? checkboxItems[0].checked = !checkboxItems[0].checked
? ? ? for (let k = 1; k < checkboxItems.length; k++) {
? ? ? ? checkboxItems[k].checked = checkboxItems[0].checked;
? ? ? }
? ? ? console.log(checkboxItems);
?
? ? ? that.setData({
? ? ? ? [childlist]: checkboxItems,
? ? ? ? [checked]: checkArr,
? ? ? ? [allNum]: all ? all : 0,
? ? ? }, function () {
? ? ? ? console.log(that.data.checked);
? ? ? })
? ? },
? ? checkboxChange(e) {
? ? ? var that = this;
? ? ? var n = that.data.n;
? ? ? console.log('checkbox發(fā)生change事件，攜帶value值為：', e.detail.value)
? ? ? var checkboxItems = that.data.childlist[n];
? ? ? var values = e.detail.value;
? ? ? var flag = "";
? ? ? var childlist = "childlist[" + n + "]";
? ? ? var checked = "checked[" + n + "]";
? ? ? var allNum = "allNum[" + n + "]";
? ? ? var checkedArr = [];
? ? ? var all = "";
?
? ? ? for (var i = 0, lenI = checkboxItems.length; i < lenI; ++i) {
? ? ? ? checkboxItems[i].checked = false;
? ? ? ? for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
? ? ? ? ? if (checkboxItems[i].id == values[j]) {
? ? ? ? ? ? checkboxItems[i].checked = true;
? ? ? ? ? ? checkedArr.push(checkboxItems[i]);
? ? ? ? ? ? break;
? ? ? ? ? }
? ? ? ? }
? ? ? }
? ? ? if (values.length == checkboxItems.length - 1) {
? ? ? ? checkboxItems[0].checked = true;
? ? ? ? // checkedArr = [checkboxItems[0]];
? ? ? ? checkedArr = [that.data.list[n]];
? ? ? ? all = checkboxItems.length - 1;
? ? ? }
? ? ? this.setData({
? ? ? ? [childlist]: checkboxItems,
? ? ? ? [checked]: checkedArr,
? ? ? ? [allNum]: all
? ? ? });
? ? ? // console.log(checkedArr)
? ? },
? ? formSubmit: function (e) {
? ? ? var that = this;
? ? ? console.log('form發(fā)生了submit事件');
? ? ? var values = that.data.checked;
? ? ? var arr = [];
? ? ? var arr1 = [];
? ? ? for (let i = 0; i < values.length; i++) {
? ? ? ? if (values[i] != undefined) {
? ? ? ? ? arr.push(values[i]);
? ? ? ? }
? ? ? }
?
? ? ? for (let i = 0; i < arr.length; i++) {
? ? ? ? for (let j = 0; j < arr[i].length; j++) {
? ? ? ? ? arr1.push(arr[i][j])
? ? ? ? }
? ? ? }
? ? ? console.log(arr1);//選中的值
? ? ? var detail = arr1;
?
? ? ? this.triggerEvent("formSubmit", detail);
? ? },
? ? back() {
? ? ? this.triggerEvent("back");
? ? }
? }
})使用方法：
在需要使用的頁面的json中聲名啟用組件
如：
{
? "usingComponents": {
? ? "check": "/components/checkGrop/checkGrop"
? }
}然后在需要使用的頁面的wxml中使用自己起的組件名就好了
如：
<check list="{{hangye}}" select="{{checkedid}}" bind:formSubmit="formSubmit" bindback="back"></check>其中l(wèi)ist 是你要往組件里傳遞的數(shù)組。 select為默認(rèn)選中的的數(shù)據(jù)的id，組件里邊的參數(shù)可以根據(jù)自己的需求更換！
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇Layer+Echarts構(gòu)建彈出層折線圖的方法，具有很的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
大家都知道要想讓 JavaScript 對(duì)用戶的操作作出響應(yīng)，首先要對(duì) DOM 元素綁定事件處理函數(shù)。所謂事件處理函數(shù)，就是處理用戶操作的函數(shù)，不同的操作對(duì)應(yīng)不同的名稱。下面這篇文章給大家詳細(xì)介紹了JavaScript中綁定事件的三種方式以及去除綁定的方法，有需要來一起看看吧。2016-11-11
本文給大家匯總介紹的是獲取JavaScript 數(shù)組中最大最小值的方法和示例，非常的詳細(xì)和全面，希望對(duì)大家學(xué)習(xí)JavaScript能夠有所幫助2016-06-06
本篇文章主要介紹了parabola.js拋物線與加入購物車效果的示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
本篇文章主要介紹了JavaScript的冒泡排序，對(duì)其進(jìn)行示例解析，具有很好的參考價(jià)值，需要的朋友一起來看下吧2016-12-12
JavaScript事件循環(huán)是一種機(jī)制，用于處理異步事件和回調(diào)函數(shù)。它是JavaScript運(yùn)行時(shí)環(huán)境的一部分，負(fù)責(zé)管理事件隊(duì)列和調(diào)用棧。文章中有詳細(xì)的代碼示例，需要的朋友可以參考一下2023-04-04
JS如何遍歷帶有子集的數(shù)組集合(嵌套數(shù)組)
這篇文章主要介紹了JS如何遍歷帶有子集的數(shù)組集合(嵌套數(shù)組)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
Bootstrap標(biāo)簽頁（Tab）插件切換echarts不顯示問題的解決
這篇文章主要給大家介紹了關(guān)于Bootstrap標(biāo)簽頁（Tab）插件切換echarts不顯示問題的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
JavaScript實(shí)現(xiàn)視頻轉(zhuǎn)GIF的示例代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)視頻轉(zhuǎn)GIF,本文一共會(huì)按照以下三步去實(shí)現(xiàn)一個(gè)視頻轉(zhuǎn)?GIF?功能,解封裝視頻,從視頻文件中獲取視頻幀,解碼視頻幀,獲取幀圖像信息,拼裝幀圖像信息,生成?GIF,需要的朋友可以參考下2024-03-03
js實(shí)現(xiàn)上傳圖片及時(shí)預(yù)覽
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)上傳圖片及時(shí)預(yù)覽的相關(guān)資料，具有一定的參考價(jià)值，感興趣的朋友可以參考一下2016-05-05