微信小程序多选组件封装

项目需要，封装了一个多选组件，有参考其他文章，出处忘记了，在那基础上以项目需求为目标做改进，以下是效果图。

效果图

代码位置

首先是弹出框的代码（multipleSelection）

wxml

<!--components/multipleSelection/index.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>

wxss

/* components/multipleSelection/index.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: 10px 10px 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: 300rpx;height: 70rpx;display: flex;flex-wrap: nowrap;justify-content: center;align-items: center;background: rgb(200, 236, 191);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: rgb(15, 179, 0);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: 300rpx;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(72, 179, 0, 0.1);font-size: 36rpx;font-family: PingFangSC-Regular;font-weight: 400;color: rgb(30, 179, 0);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: rgb(0, 179, 24);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;
}

json

{"component": true,"usingComponents": {}
}

// components/multipleSelection/index.js
Component({/*** 组件的属性列表*/properties: {//标题文字multipleContent: {type: String,value: ''},multiple_list: {type: Array,value: [{key: '',name: ''},]},value:{type:String,value:""}},/*** 组件的初始数据*/data: {is_clicked: 'choosed',// 弹窗显示控制isShow: false,list: '',choosed_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() {let list = []this.properties.multiple_list.forEach((itemI)=>{let obj = {key:itemI.key,name:itemI.name}this.properties.value.split(',').forEach((itemJ)=>{if(itemI.key == itemJ){obj.type="choosed"}})list.push(obj)})this.setData({list})//触发取消回调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);}}
})

输入框代码（multipleSelect）

wxml

<!--components/multipleSelect/index.wxml-->
<view class="selection" catchtap="showMultiple"><view class="selectionInput">{{names}}</view><multiple id="multiple" bind:multipleCancel="_multipleCancel" bind:multipleConfirm="_multipleConfirm" multipleContent='{{multipleContent}}' multiple_list="{{multiple_list}}" value="{{value}}"></multiple>
</view>

wxss

/* components/multipleSelect/index.wxss */
.selection{display: flex
}.selectionInput{width: 100%;height: 29px;line-height: 29px;border-bottom: 1px solid #ddd;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}

json

{"component": true,"usingComponents": {"multiple": "/components/multipleSelection/index"}
}

// components/multipleSelect/index.js
Component({/*** 组件的属性列表*/properties: {//标题文字multipleContent: {type: String,value: ''},multiple_list: {type: Array,value: [{key: '',name: ''},]}},/*** 组件的初始数据*/data: {names: "",value: ""},/*** 组件的方法列表*/methods: {showMultiple() {this.multiple.showMultiple();},//取消事件_multipleCancel() {// console.log('你点击了取消');this.multiple.hideMultiple();},//确认事件_multipleConfirm(e) {// console.log('获取选中的项==', e.detail);let names = [], value = []e.detail.forEach((itemI) => {names.push(itemI.name)value.push(itemI.key)})this.setData({names: names.join(','),value: value.join(',')})this.multiple.hideMultiple();this.triggerEvent("confirm", value);},getVal() {return this.data.value ? this.data.value.split(',') : []}},attached() {this.multiple = this.selectComponent("#multiple");}
})

使用

wxml

<!--pages/custStopReason/custStopReason.wxml-->
<view><view class="label">故障类型:</view><multipleSelect id="failureType" multipleContent='{{failureTypeLabel}}' multiple_list="{{failureTypeList}}"></multipleSelect>
</view><view><view class="label">状态类型:</view><multipleSelect id="machStatusType" multipleContent='{{machStatusTypeLabel}}' multiple_list="{{machStatusTypeList}}"></multipleSelect>
</view><view class="btn-area"><button type="primary" bindtap="submit">提交</button>
</view>

json

{"usingComponents": {"multipleSelect": "/components/multipleSelect/index"}
}

// pages/custStopReason/custStopReason.js
Page({/*** 页面的初始数据*/data: {failureTypeLabel: '故障类型',failureTypeList: [{key: "0",name: "否",}, {key: "1",name: "机器故障"}, {key: "2",name: "模具故障"}],machStatusTypeLabel: '状态类型',machStatusTypeList: [{key: "2",name: "自动发修模记录",}, {key: "3",name: "自动发修机记录"}, {key: "4",name: "不统计稼动率"}, {key: "5",name: "自动切订单"}, {key: "6",name: "缺料"}, {key: "7",name: "短时间默认值"}, {key: "8",name: "有订单切换默认值"}, {key: "9",name: "无订单切换默认值"}, {key: "10",name: "有订单同模具切换默认值"}],},onLoad(){this.machStatusType = this.selectComponent("#machStatusType");this.failureType = this.selectComponent("#failureType");},submit(){let failureType = this.failureType.getVal()let machStatusType = this.machStatusType.getVal()console.log('模具故障',failureType)console.log('状态类型',machStatusType)}
})

点击提交之后，value以数组的形式抛出，如果有其他需求，修改getVal方法就可以了

本人小白，大佬勿喷

微信小程序多选组件封装相关推荐

微信小程序开屏动画组件封装以及使用示例
思路首先调用wx.hideTabbar() 隐藏微信小程序的tabbar 封装一个开屏动画组件,在几秒后自动关闭在关闭的时候调用 wx.showTabber();来使tabbar显示出来效果展示 ...
php微信小程序海报,微信小程序海报生成组件封装
每个小程序成型后,一般都会选择生成带菊花码的海报分享出去来吸引更多的流量.下面来介绍下他的一种实现方式吧原理:主要利用微信小程序强大的Canvas API来合成,生成后可用wx.canvasToTe ...
微信小程序图片验证组件封装
一.图片滑动验证组件延迟页面展示或者延缓并发处理.当滑动图片到空缺位置后执行加载或者验证. 二.封装源码 1.wxml <!--遮罩层,弹框图片背景,滑动框图片比例:16:9 1.777777 ...
微信小程序录音+播放组件封装(源码）
展示长按录音松开结束录音点击播放再次点击暂停再次点击继续播放展示效果: 录音功能录音功能(手指按下开始录音手指松开结束录音): 使用wx原生录音功能在 component 外新建 wx ...
微信小程序省市县组件封装，处理出现空白bug
官方的省市县组件官方提供了省市县的picker,mode=region 即为省市区选择器,官网有详细解说,并提供demo.官网说明 <view class="section" ...
微信小程序弹框组件封装
popup组件,居中和底部弹起 1.popup.wxml <view class="popup-common fade-in-linear-enter-active {{ flag ? ...
微信小程序授权登录组件的封装
微信小程序授权登录组件的封装新建components文件写wxml文件 wxss部分 js部分 json引用页面使用页面js 授权登录流程如下: 因为多个页面功能需要登录状态所以做了个组 ...
微信小程序自定义标签组件component封装、组件生命周期，组件通信
微信小程序自定义标签组件component封装.组件生命周期,组件通信本文来说下小程序的自定义标签组件封装. 相比于vue,react的非路由组件,微信小程序的component组件要麻烦些,而且生 ...
微信小程序勾选协议与提交按钮联动
微信小程序勾选协议与提交按钮联动在一些小程序的开发中有时会实现,未勾选相关协议,提交按钮是禁用状态,勾选相关协议,提交按钮变成可用状态.如下图所示: 主要用到开发文档按钮组件的一个属性: 代码: w ...

微信小程序多选组件封装

效果图

代码位置

首先是弹出框的代码（multipleSelection）

输入框代码（multipleSelect）

使用

微信小程序多选组件封装相关推荐

最新文章

热门文章