微信小程序自定义组件实现多选功能

   多选按钮      

// 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();   } })

{   "usingComponents": {     "multiple": "/component/selector/multiple_selection/multiple_selection"   } }

                      {{multipleContent}}                                            {{item.name}}                             {{item.name}}                                          重置       确定        

// 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

{   "component": true }

/* 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; }