微信小程序自定義組件實現(xiàn)多選功能
更新時間：2022年07月19日 10:17:13 作者：HZR_497
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義組件實現(xiàn)多選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序自定義組件實現(xiàn)多選的具體代碼，供大家參考，具體內(nèi)容如下
效果圖：
調(diào)用部分（例如在index頁面）
index.wxml
<view catchtap="showMultiple">
? 多選按鈕
? <multiple id="multiple" bind:multipleCancel="_multipleCancel" bind:multipleConfirm="_multipleConfirm" multipleContent='{{multipleContent}}' multiple_list="{{multiple_list}}">
? </multiple>
</view>index.js
// pages/index/index/index.js
Page({
?
? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
? ? multipleContent: '多選按鈕',
? ? multiple_list: [{
? ? ? key: "100以下",
? ? ? name: "100以下"
? ? }, {
? ? ? key: "200以下",
? ? ? name: "200以下"
? ? }, {
? ? ? key: "300以下",
? ? ? name: "300以下"
? ? }, {
? ? ? key: "400以下",
? ? ? name: "400以下"
? ? }, {
? ? ? key: "500以下",
? ? ? name: "500以下"
? ? }, {
? ? ? key: "600以下",
? ? ? name: "600以下"
? ? }, {
? ? ? key: "700以下",
? ? ? name: "700以下"
? ? }, {
? ? ? key: "800以下",
? ? ? name: "800以下"
? ? }, {
? ? ? key: "900以下",
? ? ? name: "900以下"
? ? }, {
? ? ? key: "1000以下",
? ? ? name: "1000以下"
? ? }],
?
? ?
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面加載
? ?*/
? onLoad: function(options) {
?
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
? ?*/
? onReady: function() {
? ? //獲得input_select組件
? ? this.input_select = this.selectComponent("#input_select");
?
? ? //獲得singer組件 單選
? ? this.singer = this.selectComponent("#singer");
?
? ? //獲得multiple組件 ?多選
? ? this.multiple = this.selectComponent("#multiple");
? },
?
?
? //****************************************多選自定義組件部分*********************************
? showMultiple: function() {
? ? this.multiple.showMultiple();
? },
?
? //取消事件
? _multipleCancel() {
? ? console.log('你點擊了取消');
? ? this.multiple.hideMultiple();
? },
? //確認(rèn)事件
? _multipleConfirm(e) {
? ? console.log('獲取選中的項==', e.detail);
? ? this.multiple.hideMultiple();
? }
})index.json
{
? "usingComponents": {
? ? "multiple": "/component/selector/multiple_selection/multiple_selection"
? }
}自定義組件部分（命名為multiple_selection）
multiple_selection.wxml
<!--component/selector/singer.wxml-->
<view class='singer-bg' wx:if="{{isShow}}">
? <view class='singer-body'>
? ? <view class='singer-body-name'>
? ? ? <view class='singer-body-name-line'></view>
? ? ? <view class='singer-body-name-txt'>{{multipleContent}}</view>
? ? ? <view class='singer-body-name-line'></view>
? ? </view>
? ? <view class='singer-body-list'>
? ? ? <block wx:for="{{list}}" wx:for-item="item" wx:key="idx" wx:for-index="idx">
? ? ? ? <view class='list-item-choosed' wx:if='{{item.type=="choosed"}}' data-mkh='{{idx}}' bindtap='choose_item'>
? ? ? ? ? <view class='item-choosed-txt'>{{item.name}}</view>
? ? ? ? </view>
? ? ? ? <view class='list-item' data-mkh='{{idx}}' bindtap='choose_item' wx:else>
? ? ? ? ? <view class='item-txt'>{{item.name}}</view>
? ? ? ? </view>
? ? ? </block>
?
?
? ? </view>
? ? <view class='singer-body-kongbai'></view>
? ? <view class='singer-body-icon'>
? ? ? <view class='icon-left' catchtap='_multipleCancel'>重置</view>
? ? ? <view class='icon-right' catchtap='_multipleConfirm'>確定</view>
? ? </view>
? </view>
</view>multiple_selection.js
// component/selector/singer.js
Component({
? /**
? ?* 組件的屬性列表
? ?*/
? properties: {
? ? //標(biāo)題文字
? ? multipleContent: {
? ? ? type: String,
? ? ? value: ''
? ? },
? ? multiple_list: {
? ? ? type: Array,
? ? ? value: [{
? ? ? ? key: '',
? ? ? ? name: ''
? ? ? }, ]
? ? }
? },
?
? /**
? ?* 組件的初始數(shù)據(jù)
? ?*/
? data: {
? ? is_clicked: 'choosed',
? ? // 彈窗顯示控制
? ? isShow: false,
? ? list: '',
? },
? pageLifetimes: {
? ? // 組件所在頁面的生命周期函數(shù)
? ? show() {
? ? ? this.setData({
? ? ? ? list: this.properties.multiple_list
? ? ? })
? ? },
? },
? /**
? ?* 組件的方法列表
? ?*/
? methods: {
? ? //選中
? ? choose_item: function(e) {
? ? ? ?var temp = e.currentTarget.dataset.mkh;
?
? ? ? var list_new = this.data.list;
?
? ? ? var check_item = {};
? ? ? check_item = list_new[temp];
? ? ? check_item.type = check_item.type == "choosed" ? "" : "choosed";
? ? ? list_new[temp] = check_item;
?
? ? ? this.setData({
? ? ? ? list: list_new,
?
? ? ? })
? ? },
? ? //隱藏彈框
? ? hideMultiple: function() {
? ? ? this.setData({
? ? ? ? isShow: false,
? ? ? })
? ? },
? ? //展示彈框
? ? showMultiple: function() {
? ? ? this.setData({
? ? ? ? isShow: true,
? ? ? })
? ? },
? ? /*
? ? ?* 內(nèi)部私有方法建議以下劃線開頭
? ? ?* triggerEvent 用于觸發(fā)事件
? ? ?*/
? ? _multipleCancel() {
? ? ? //觸發(fā)取消回調(diào)
? ? ? this.triggerEvent("multipleCancel")
? ? },
? ? _multipleConfirm() {
? ? ? //觸發(fā)成功回調(diào)
? ? ? var return_list=[];
? ? ? for(var i=0;i<this.data.list.length;i++){
? ? ? ? if (this.data.list[i].type=="choosed"){
? ? ? ? ? return_list.push(this.data.list[i]);
? ? ? ? }else{
? ? ? ? ? continue;
? ? ? ? }
? ? ? }
? ?
? ? ? this.triggerEvent("multipleConfirm",return_list);
? ? }
? }
})multiple_selection.json
{
? "component": true
}multiple_selection.wxss
/* component/selector/singer.wxss */
?
.singer-bg {
? width: 100%;
? height: 100%;
? position: fixed;
? top: 0;
? left: 0;
? z-index: 9999;
? background: rgba(0, 0, 0, 0.5);
}
?
.singer-bg .singer-body {
? min-width: 100%;
? width: 100%;
? height: 968rpx;
? max-height: 968rpx;
? background: rgba(255, 255, 255, 1);
? border-radius: 20px 20px 0px 0px;
? position: absolute;
? left: 0;
? bottom: 0;
}
?
.singer-bg .singer-body .singer-body-name {
? width: 100%;
? display: flex;
? flex-wrap: nowrap;
? justify-content: center;
? align-items: center;
? margin-top: 60rpx;
? margin-bottom: 50rpx;
}
?
.singer-bg .singer-body .singer-body-name .singer-body-name-line {
? width: 260rpx;
? border-bottom: 2rpx solid rgba(240, 240, 240, 1);
}
?
.singer-bg .singer-body .singer-body-name .singer-body-name-txt {
? height: 48rpx;
? font-size: 34rpx;
? font-family: PingFangSC-Medium;
? font-weight: 500;
? color: rgba(0, 0, 0, 1);
? line-height: 48rpx;
? margin-left: 10rpx;
? margin-right: 10rpx;
}
?
.singer-bg .singer-body .singer-body-list {
? width: 100%;
? max-height: 650rpx;
? display: flex;
? flex-direction: row;
? align-items: flex-start;
? flex-wrap: wrap;
? padding: 0rpx 10rpx 0rpx 40rpx;
? overflow: auto;
}
?
.singer-bg .singer-body .singer-body-list .list-item-choosed {
? width: 182rpx;
? height: 70rpx;
? display: flex;
? flex-wrap: nowrap;
? justify-content: center;
? align-items: center;
? background: rgba(191, 213, 236, 1);
? border-radius: 6rpx;
? margin-right: 30rpx;
? padding: 0rpx 10rpx 0rpx 10rpx;
? margin-bottom: 30rpx;
}
?
.singer-bg .singer-body .singer-body-list .list-item-choosed .item-choosed-txt {
? font-size: 30rpx;
? font-family: PingFangSC-Regular;
? font-weight: 400;
? color:rgba(0,89,179,1);
? line-height: 70rpx;
? display: -webkit-box;
? word-break: break-all;
? text-overflow: ellipsis;
? overflow: hidden;
? -webkit-box-orient: vertical;
? -webkit-line-clamp: 1;
}
?
.singer-bg .singer-body .singer-body-list .list-item {
? width: 182rpx;
? height: 70rpx;
? display: flex;
? flex-wrap: nowrap;
? justify-content: center;
? align-items: center;
? background: rgba(240, 240, 240, 1);
? border-radius: 6rpx;
? margin-right: 30rpx;
? padding: 0rpx 10rpx 0rpx 10rpx;
? margin-bottom: 30rpx;
}
?
.singer-bg .singer-body .singer-body-list .list-item ?.item-txt {
? font-size: 30rpx;
? font-family: PingFangSC-Regular;
? font-weight: 400;
? color: rgba(51, 51, 51, 1);
? line-height: 70rpx;
? display: -webkit-box;
? word-break: break-all;
? text-overflow: ellipsis;
? overflow: hidden;
? -webkit-box-orient: vertical;
? -webkit-line-clamp: 1;
}
?
.singer-bg .singer-body .singer-body-kongbai {
? width: 100%;
? height: 120rpx;
}
?
.singer-bg .singer-body .singer-body-icon {
? width: 100%;
? height: 110rpx;
? display: flex;
? flex-wrap: nowrap;
? justify-content: space-between;
? position: fixed;
? bottom: 0;
? z-index: 9999999999;
? background: rgba(255, 255, 255, 1);
}
?
.singer-bg .singer-body .singer-body-icon .icon-left {
? width: 374rpx;
? height: 110rpx;
? background: rgba(0, 89, 179, 0.1);
? font-size: 36rpx;
? font-family: PingFangSC-Regular;
? font-weight: 400;
? color: rgba(0, 89, 179, 1);
? line-height: 50rpx;
? display: flex;
? align-items: center;
? justify-content: center;
}
?
.singer-bg .singer-body .singer-body-icon .icon-right {
? width: 374rpx;
? height: 110rpx;
? background: rgba(0, 89, 179, 1);
? font-size: 36rpx;
? font-family: PingFangSC-Regular;
? font-weight: 400;
? color: rgba(255, 255, 255, 1);
? line-height: 50rpx;
? display: flex;
? align-items: center;
? justify-content: center;
}以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
函數(shù)式JavaScript編程指南...2007-02-02
基于JavaScript代碼實現(xiàn)隨機漂浮圖片廣告
在網(wǎng)上有很多這樣的代碼，不過未必符合W3C標(biāo)準(zhǔn)，因為在頭部加上<!DOCTYPE html>類似標(biāo)簽之后，漂浮效果就會失效，下面分享一個符合標(biāo)準(zhǔn)的漂浮代碼，使需要的朋友免去大量改造代碼的繁瑣2016-01-01
javascript:void(0) 在某些情況下會有瀏覽器不兼容的bug。下面我們先來看下javascript:void(0) 的基礎(chǔ)介紹及用法，然后再來看使用它會出現(xiàn)什么問題，該怎么解決，感興趣的朋友跟隨小編一起看看吧2023-10-10
這篇文章主要weidajiaxiangxi介紹了很酷的星級評分系統(tǒng)原生JS實現(xiàn)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要介紹了JavaScript插件化開發(fā)教程，十分的詳細(xì)，2015-01-01
學(xué)習(xí)并匯集javascript匿名函數(shù)
接觸jQuery很長時間了，對其的實現(xiàn)有太多疑問，可謂只知道皮毛，對其的精髓一竅不通，可悲?。∷杂斜匾芯肯缕渲械脑?。2010-11-11
這篇文章主要介紹了JS實現(xiàn)仿微信支付彈窗功能,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
這篇文章主要介紹了JS高級運動,結(jié)合實例形式分析了javascript運動框架原理、實現(xiàn)與應(yīng)用技巧,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了JS正則表達(dá)式驗證賬號、手機號、電話和郵箱是否合法,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了詳解require.js配置路徑的用法和css的引入,具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09