微信小程序自定义组件之Picker组件

微信小程序开发交流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.id
      this.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 = this
      that.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 = this
      that.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.id
      this.setData({
        radioChange_value, picker_id
      })
      // console.log('value值为：', radioChange_value, 'picker_id值为：', picker_id)
    },
    myPickerHide() {
      this.triggerEvent('myPickerHide', '');
    },
    freeBack: function () {
      var that = this
      this.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": {}
}