效果图:
调用处:(例如在index页面调用)
index.json(input_select为组件的名称)
{
"usingComponents": {
"input_select": "/component/selector/input_select/input_select",
}
}
index.js
Page({
/*
* 页面的初始数据
*/
data: {
content: "自定义组件",
number_list: [{
key: "100",
name: "100以下"
}, {
key: "200",
name: "200以下"
}, {
key: "300",
name: "300以下"
}]
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
//获得input_select组件
this.input_select = this.selectComponent("#input_select");
},
此处省略微信小程序的部分方法
//*************************单选带输入框按钮*******************************
showDialog: function() {
this.input_select.showDialog();
},
//取消事件
_inputSelectCancel() {
console.log('你点击了取消');
this.input_select.hideDialog();
},
//确认事件
_inputSelectConfirm(e) {
console.log('你点击了确定==', e.detail);
this.input_select.hideDialog();
},
})
index.wxml:
<view catchtap="showDialog">
单选带输入框按钮
<input_select id="input_select" bind:inputSelectCancel="_inputSelectCancel" bind:inputSelectConfirm="_inputSelectConfirm" content='{{content}}' number_list="{{number_list}}">
</input_select>
</view>
自定义组件部分(****)
命名为:input_select
input_select.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'>{{content}}</view>
<view class='singer-body-name-line'></view>
</view>
<view class='singer-body-double'>
<view class='double-input'>
<input class='double-input-txt' value='{{json.start}}' placeholder='开始值' bindblur='changestart' bindconfirm='changestart' bindinput='changestart'></input>
</view>
<view class='double-input'>
<input class='double-input-txt' value='{{json.end}}' placeholder='结束值' bindblur='changeend' bindconfirm='changeend' bindinput='changeend'></input>
</view>
</view>
<view class='singer-body-list'>
<block wx:for="{{number_list}}" wx:for-item="item" wx:key="unique">
<view class='body-list-item-choosed' wx:if="{{json.start==item.key}}" data-key='{{item.key}}' bindtap='chooseNumber'>{{item.name}}</view>
<view class='body-list-item'data-key='{{item.key}}' bindtap='chooseNumber' wx:else>{{item.name}}</view>
</block>
</view>
<view class='singer-body-kongbai'></view>
<view class='singer-body-icon'>
<view class='icon-left' catchtap='_inputSelectCancel'>重置</view>
<view class='icon-right' catchtap='_inputSelectConfirm'>确定</view>
</view>
</view>
</view>
input_select.js
Component({
/**
* 组件的属性列表
*/
properties: {
//标题文字
content: {
type: String,
value: ''
},
number_list: {
type: Array,
value: [{
key: '',
name: ''
}, ]
}
},
/**
* 组件的初始数据
*/
data: {
isShow: false,
json: {
start: "",
end: "",
}
},
/**
* 组件的方法列表
*/
methods: {
chooseNumber: function(e) {
this.setData({
json: {
start: e.currentTarget.dataset.key,
end: this.data.json.end,
}
})
},
changestart: function(event) {
var start = event.detail.value;
this.setData({
json: {
start: start,
end: this.data.json.end,
}
})
},
changeend: function(event) {
var end = event.detail.value;
this.setData({
json: {
start: this.data.json.start,
end: end,
}
})
},
//隐藏弹框
hideDialog: function() {
this.setData({
isShow: false,
json: {
start: "",
end: "",
}
})
},
//展示弹框
showDialog: function() {
this.setData({
isShow: true,
})
},
/*
* 内部私有方法建议以下划线开头
* triggerEvent 用于触发事件
*/
_inputSelectCancel() {
//触发取消回调
this.triggerEvent("inputSelectCancel")
},
_inputSelectConfirm() {
//触发成功回调
this.triggerEvent("inputSelectConfirm", this.data.json);
}
}
})
input_select.json
{
"component": true
}
input_select.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-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;
}
.singer-bg .singer-body .singer-body-double {
width: 100%;
max-width: 100%;
display: flex;
flex-wrap: nowrap;
}
.singer-bg .singer-body .singer-body-double .double-input {
width: 320rpx;
height: 78rpx;
background: rgba(255, 255, 255, 1);
border-radius: 6rpx;
border: 1px solid rgba(204, 204, 204, 1);
margin-left: 40rpx;
display: flex;
align-items: center;
justify-content: center;
}
.singer-bg .singer-body .singer-body-double .double-input .double-input-txt {
width: 280rpx;
height: 78rpx;
font-size: 30rpx;
font-family: PingFangSC-Medium;
font-weight: 500;
color: rgba(26, 26, 26, 1);
padding: 0rpx 20rpx 0rpx 20rpx;
}
.singer-bg .singer-body .singer-body-list {
width: 100%;
display: flex;
flex-wrap: wrap;
padding: 0rpx 0rpx 0rpx 30rpx;
margin-top: 50rpx;
}
.singer-bg .singer-body .singer-body-list .body-list-item {
width: 212rpx;
height: 70rpx;
background: rgba(240, 240, 240, 1);
border-radius: 35rpx;
margin-right: 30rpx;
margin-bottom: 30rpx;
font-size: 30rpx;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(51, 51, 51, 1);
display: flex;
align-items: center;
justify-content: center;
}
.singer-bg .singer-body .singer-body-list .body-list-item-choosed {
width: 212rpx;
height: 70rpx;
background: rgba(0, 89, 179, 0.25);
border-radius: 35rpx;
margin-right: 30rpx;
margin-bottom: 30rpx;
font-size: 30rpx;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(0, 89, 179, 1);
display: flex;
align-items: center;
justify-content: center;
}