效果图:

调用部分(例如在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.h