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

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

效果图：

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

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

查看更多关于微信小程序自定义组件实现单选功能的详细内容...