微信小程序自定义组件实现多选功能
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了微信小程序自定义组件实现多选的具体代码，供大家参考，具体内容如下
效果图：
调用部分（例如在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");
},
/
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,
})
},
_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
.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;
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
