本文实例为大家分享了微信小程序自定义组件实现多选的具体代码，供大家参考，具体内容如下
效果图：
调用部分（例如在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({
/**
* 页面的初始数据
*/
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以下"
}],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
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();
},
//确认事件
_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: {
//标题文字
multipleContent: {
type: String,
value: ''
},
multiple_list: {
type: Array,
value: [{
key: '',
name: ''
}, ]
}
},
/**
* 组件的初始数据
*/
data: {
is_clicked: 'choosed',
// 弹窗显示控制
isShow: false,
list: '',
},
pageLifetimes: {
// 组件所在页面的生命周期函数
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,
})
},
/*
* 内部私有方法建议以下划线开头
* triggerEvent 用于触发事件
*/
_multipleCancel() {
//触发取消回调
this.triggerEvent("multipleCancel")
},
_multipleConfirm() {
//触发成功回调
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;
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持阿兔在线工具。
