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

   单选按钮      

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();   },   })

{   "usingComponents": {     "singer": "/component/selector/singer/singer",   } }

                      {{singerContent}}                                            {{item.name}}                             {{item.name}}                                      重置       确定        

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);     }   } })

{   "component": true }

/* 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; }