微信小程序开发交流qq群 173683895
承接微信小程序开发。扫码加微信。
需求： 通过JS条件判断，满足条件就弹出Picker给用户选择一个数组里面的数据。
有些朋友可能会有疑问：
1.为什么要使用自定义的Picker组件，不是有原生的组件吗？
回答：因为小程序的Picker组件是需要用户手动触发的。并不满足上述需求。
2.这个需求我知道在小程序文档里面有一个API可以满足这个需求。wx.showActionSheet(Object object)//显示操作菜单
回答：wx.showActionSheet()有长度的限制，最多只能6个选项。
那么为了满足这些条件，我们需要自己写了，我把这个选择器封装成了一个组件，可以方便的调用
目录：
1.自定义组件效果图
2.自定义组件源码1：
3.引用组件
4.自定义组件源码2
1.效果图1：
效果图2：
点击确定以后：
2.自定义组件源码1：
// my-picker.jsComponent({/*** 组件的属性列表*/properties: {//配置页面传过来的值,key值要一一对应'list': {type: Array, //必填，目前接受的类型包括：String,Number,Boolean, Object, Array, null（表示任意类型）value: [] //可选，默认值，如果页面没传值过来就会使用默认值 },'showDialog': {type: Boolean, //必填，目前接受的类型包括：String,Number,Boolean, Object, Array, null（表示任意类型）value: false //可选，默认值，如果页面没传值过来就会使用默认值 }},data: {},/*** 组件的方法列表*/methods: {radioChange: function (e) {let radioChange_value = e.currentTarget.dataset.data;let picker_id = e.currentTarget.dataset.idthis.setData({radioChange_value, picker_id})// console.log('value值为：', radioChange_value, 'picker_id值为：', picker_id)},toggleDialog() {this.setData({showDialog: !this.data.showDialog});},freeBack: function () {var that = thisthat.setData({showDialog: !this.data.showDialog})console.log('his.data.radioChange_value', this.data.radioChange_value)this.triggerEvent('myPickerChange', this.data.radioChange_value);},freetoBack: function () {var that = thisthat.setData({showDialog: !this.data.showDialog,value: 'show',})},pickerCancel() {// 滚动选择器 - 取消this.pickerHandler()this.triggerEvent('cancel', arr, {})}}})
wxml
<view class="free-dialog {{ showDialog ? 'free-dialog--show' : '' }}"><view class="free-dialog__mask" bindtap="toggleDialog" /><view class="free-dialog__container"><view style="padding: 5% 5% 15%;"><view bindtap='freetoBack' class="free-button free-dialog-reset">取消</view><view bindtap='freeBack' class="free-button free-dialog-submit">确定</view><radio-group class='free-radios'><label class="free-radio" wx:for="{{list}}" wx:key="" catchtap="radioChange" data-data='{{item}}' data-id="{{index}}" style="{{index==picker_id?'background:#48c23d;color:#fff;':'background:#fff;color:#000;'}}"><label class="free-text">{{item}}</label></label></radio-group></view></view></view>
wxss
.free-dialog__mask {position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 10;background: rgba(0, 0, 0, 0.7);display: none;}.free-dialog__container {position: fixed;left: 0;bottom: 0;width: 750rpx;background: white;transform: translateY(150%);transition: all 0.4s ease;z-index: 11;}.free-dialog--show .free-dialog__container {transform: translateY(0);}.free-dialog--show .free-dialog__mask {display: block;}/*模态框中的内容*/.free-button{display: inline-block;width:100rpx;text-align: center;font-size:20px;color:#707070;margin-bottom:20px;}.free-dialog-submit{float: right;color:#48c23d;}radio-group{margin:10rpx 0rpx;}radio-group>label{width:48%;display: inline-block;border:1px solid #ddd;padding:10px 0px;margin:0px 2px 2px;}radio-group label radio{width:100%;z-index: 3;display: none;}.checked{background:#48c23d;color:#fff;}radio-group label .free-text{width:100%;text-align: center;display: inline-block;}
json
{"component": true,"usingComponents": {}}
这里面包含了页面给自定义组件传递数据，自定义组件给页面传递数据，自定义组件的事件。
3.引用组件：
<myPicker wx:if='{{configType==1&&address_list!=[]}}' bindmyPickerChange="myPickerChange"showDialog='{{myPicker_show}}' list='{{address_list}}'></myPicker>
js
Page({data: {myPicker_show:false,address_list:['1','2','3','4','5','6','7'], },// 自定义组件选择的结果myPickerChange(e) {console.log('自定义组件选择的结果',e.detail)this.setData({address: e.detail})}})
json
{"navigationBarTitleText": "资料填写","usingComponents": {"myPicker": "../../../components/myPicke/myPicke"}}
4.自定义组件源码2
// my-picker.jsComponent({/*** 组件的属性列表*/properties: {//配置页面传过来的值,key值要一一对应'list': {type: Array, //必填，目前接受的类型包括：String,Number,Boolean, Object, Array, null（表示任意类型）value: [] //可选，默认值，如果页面没传值过来就会使用默认值 },'showDialog': {type: Boolean, //必填，目前接受的类型包括：String,Number,Boolean, Object, Array, null（表示任意类型）value: false //可选，默认值，如果页面没传值过来就会使用默认值 }},data: {},/*** 组件的方法列表*/methods: {radioChange: function (e) {let radioChange_value = e.currentTarget.dataset.data;let picker_id = e.currentTarget.dataset.idthis.setData({radioChange_value, picker_id})// console.log('value值为：', radioChange_value, 'picker_id值为：', picker_id)},myPickerHide() {this.triggerEvent('myPickerHide', '');},freeBack: function () {var that = thisthis.triggerEvent('myPickerHide', '');console.log('his.data.radioChange_value', this.data.radioChange_value)this.triggerEvent('myPickerChange', this.data.radioChange_value);},}})
wxml
<view class="free-dialog {{ showDialog ? 'free-dialog--show' : '' }}"><view class="free-dialog__mask" bindtap="myPickerHide" /><view class="free-dialog__container"><view class='title_line' style=""><view bindtap='myPickerHide' class="free-button free-dialog-reset">取消</view><view bindtap='freeBack' class="free-button free-dialog-submit">确定</view></view><scroll-view class='free-radios' scroll-y='true'><view class="free-radio" wx:for="{{list}}" wx:key="" catchtap="radioChange" data-data='{{item}}' data-id="{{index}}" style="{{index==picker_id?'color:#48c23d;':'color:#999;'}}"><view class="free-text">{{item}}</view></view></scroll-view></view></view>
wxml
.free-dialog__mask {position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 9998;background: rgba(0, 0, 0, 0.7);display: none;}.title_line{padding-top: 20rpx;border-bottom: 1px solid #f2f2f2;margin-bottom: 30rpx;}.free-dialog__container {position: fixed;left: 0;bottom: 0;width: 750rpx;background: white;transform: translateY(150%);transition: all 0.4s ease;z-index: 9999;}.free-dialog--show .free-dialog__container {transform: translateY(0);}.free-dialog--show .free-dialog__mask {display: block;}/*模态框中的内容*/.free-button{display: inline-block;width:100rpx;text-align: center;font-size:36rpx;color:#707070;margin-bottom:10px;}.free-radios{height: 385rpx;padding-bottom: 40rpx;}.free-radio{padding: 10rpx;text-align: center;}.free-dialog-submit{float: right;color:#48c23d;}radio-group{margin:10rpx 0rpx;}radio-group>label{width:100%;display: inline-block;/* border:1px solid #ddd; */padding:10px 0px;margin:0px 2px 2px;}.checked{background:#48c23d;color:#fff;}radio-group label .free-text{width:100%;margin: 20rpx;text-align: center;font-size:28rpx;border-top: 1px solid #f2f2f2;border-bottom: 1px solid #f2f2f2;display: inline-block;}
json
{"component": true,"usingComponents": {}}
