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

本文实例为大家分享了微信小程序自定义组件实现多选的具体代码，供大家参考，具体内容如下

效果图：

调用部分（例如在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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。