微信小程序开发交流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.js
Component({/*** 组件的属性列表*/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.js
Component({/*** 组件的属性列表*/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": {}
}