微信小程序自定义组件实现多选功能
作者：HZR_497
这篇文章主要为大家详细介绍了微信小程序自定义组件实现多选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序自定义组件实现多选的具体代码，供大家参考，具体内容如下
效果图：
调用部分（例如在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;
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。