微信小程序自定义组件实现多选功能
本文实例为大家分享了微信小程序自定义组件实现多选的具体代码，供大家参考，具体内容如下
效果图：
调用部分（例如在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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
微信小程序实现多选删除列表数据功能示例
本文实例讲述了微信小程序实现多选删除列表数据功能.分享给大家供大家参考,具体如下: 实现小程序一个类似多选列表删除的功能 <!-- 错题本 --> <view class="contarner"> <view class="content"> <view class="title flex-def flex-cCenter flex-zBetween"> <view>错题本(<te
-
微信小程序单选radio及多选checkbox按钮用法示例
本文实例讲述了微信小程序单选radio及多选checkbox按钮用法.分享给大家供大家参考,具体如下: 1.单选:radio 实例: js: Page({ data : { radioId:"", loves:[ {id:1, name:"跑步" ,checked : 'true'}, {id:2, name:"篮球" }, {id:3, name:"足球" }, ] }, updataRadio:function(e){ v
-
微信小程序自定义多选事件的实现代码
要实现下图的效果(自定义多选单选),大多数公司项目的多选框都是自己设计的,所以用原生标签或者组件是不可行的,最简单的是自己绑定事件,然后切换选择和未选择的图片.而小程序和vue一样是没法操作dom的,所以要利用数组的下标和自定义属性来进行三元判断. 直接上代码: wxml: <view class="sel-box"> /**用wx:for来进行列表渲染**/ <view wx:for="{{repContent}}" class="mu
-
微信小程序全选多选效果实现代码解析
这篇文章主要介绍了微信小程序全选多选效果实现代码解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果图: wxml代码: <view class="memberList"> <view class="allSelect_box" bindtap='selectAll'> <checkbox class="checkbox" checked="{{sel
-
微信小程序复选框实现多选一功能过程解析
这篇文章主要介绍了微信小程序复选框实现多选一功能过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 功能实现界面 data: { checkboxItems: [ { name: '全天(1-8节)', value: 'allday' }, { name: '上午(1-4节)', value: 'am' }, { name: '下午(5-8节)', value: 'pm' }, { name: '晚上(晚自习)', value: 'nigh
-
微信小程序实现多选框功能的实例代码
我们先来看看效果: 两种状态: 选中/不选中 wxml <!-- 选择 S --> <view wx:for="{{riderCommentList}}" wx:for-item="item" wx:key="index" bindtap="checkboxChange" data-value="{{item.value}}" data-index="{{index}}"
-
微信小程序实现多选框全选与取消全选功能示例
本文实例讲述了微信小程序实现多选框全选与取消全选功能.分享给大家供大家参考,具体如下: js部分: page({ data: { select_all:false, listData: [{code: "111",text: "text1",typ: "type1",}, {code: "021",text: "text2",typ: "type2",}, {code: "11
-
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
实现的效果就是: 1.点击全选选中所有商品,再点击全选,取消勾选 2.在选中的同时获取需要的商品id,获取后是以字符串拼接的形式 拼成一个字符串 3.点击删除按钮时删除选中的商品 点击全选 再次点击全选框 wxml关键代码 重要代码 value="{{item.goods_id}}" -->checkbox被选中的值就是这个goods_id checked="{{item.checked}}" -->checked代表选中与否 ,ture选中,false
-
微信小程序实现多选框全选操作
本文实例为大家分享了微信小程序实现多选框全选的具体代码,供大家参考,具体内容如下 test.wxml <view class="container"> <!-- 多选框 --> <view class="page-body"> <view class="page-section"> <view class="page-secti
-
微信小程序实现多选功能
本文为大家分享了微信小程序实现多选功能的具体代码,供大家参考,具体内容如下 代码: <!--hotblood_gongkao/pages/answer/answer.wxml--> <!-- content --> <view class='answer-list'> <view class='answer-child'> <text class='answer-title'><text style='margin-right:28rpx;