本文实例为大家分享了微信小程序自定义组件实现单选的具体代码，供大家参考，具体内容如下
效果图：
调用部分（例如在index页面）
index.wxml
<view catchtap="showSinger">
单选按钮
<singer id="singer" bind:singerCancel="_singerCancel" bind:singerConfirm="_singerConfirm" singerContent='{{singerContent}}' singer_list="{{singer_list}}">
</singer>
</view>index.js
Page({
/**
* 页面的初始数据
*/
data: {
singerContent: '单选按钮',
singer_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以下"
}],
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
//获得input_select组件
this.input_select = this.selectComponent("#input_select");
//获得singer组件 单选
this.singer = this.selectComponent("#singer");
//获得multiple组件 多选
this.multiple = this.selectComponent("#multiple");
},
//**************************************单选自定义组件部分************************
showSinger: function() {
this.singer.showSinger();
},
//取消事件
_singerCancel() {
console.log('你点击了取消');
this.singer.hideSinger();
},
//确认事件
_singerConfirm(e) {
console.log('你点击了确定==', e.detail);
this.singer.hideSinger();
},
})index.json
{
"usingComponents": {
"singer": "/component/selector/singer/singer",
}
}自定义组件部分（命名为singer）
singer.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'>{{singerContent}}</view>
<view class='singer-body-name-line'></view>
</view>
<view class='singer-body-list'>
<block wx:for="{{singer_list}}" wx:for-item="item" wx:key="unique">
<view class='list-item-choosed' wx:if="{{choose_type==item.key}}" data-key='{{item.key}}' bindtap='clicktype'>
<view class='item-choosed-txt'>{{item.name}}</view>
</view>
<view class='list-item' data-key='{{item.key}}' bindtap='clicktype' 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='_singerCancel'>重置</view>
<view class='icon-right' catchtap='_singerConfirm'>确定</view>
</view>
</view>
</view>singer.js
Component({
/**
* 组件的属性列表
*/
properties: {
//标题文字
singerContent: {
type: String,
value: ''
},
singer_list: {
type: Array,
value: [{
key: '',
name: ''
}, ]
}
},
/**
* 组件的初始数据
*/
data: {
isShow: false,
choose_type: "",
},
onLoad: function() {
this.properties
},
/**
* 组件的方法列表
*/
methods: {
clicktype: function(e) {
this.setData({
choose_type: e.currentTarget.dataset.key,
})
},
//隐藏弹框
hideSinger: function() {
this.setData({
isShow: false,
json: {
start: "",
end: "",
}
})
},
//展示弹框
showSinger: function() {
this.setData({
isShow: true,
})
},
/*
* 内部私有方法建议以下划线开头
* triggerEvent 用于触发事件
*/
_singerCancel() {
//触发取消回调
this.triggerEvent("singerCancel")
},
_singerConfirm() {
//触发成功回调
this.triggerEvent("singerConfirm", this.data.choose_type);
}
}
})singer.json
{
"component": true
}singer.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;
justify-content: center;
align-items: center;
background: rgba(191, 213, 236, 1);
border-radius: 6rpx;
margin-right: 30rpx;
margin-bottom: 20rpx;
padding: 0rpx 10rpx 0rpx 10rpx;
}
.singer-bg .singer-body .singer-body-list .list-item-choosed .item-choosed-txt {
font-size: 30rpx;
font-family: PingFangSC-Regular;
font-weight: 400;
line-height: 70rpx;
color: rgba(0, 89, 179, 1);
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;
margin-bottom: 20rpx;
padding: 0rpx 10rpx 0rpx 10rpx;
}
.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;
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持阿兔在线工具。
