likes
comments
collection
share

小程序picker和picker-view组件

作者站长头像
站长
· 阅读数 33

小程序从底部弹起的滚动选择器

之所以要写这篇文章，是因为之前在做一个项目的时候遇到一个需求（实现两列联动效果）但是小程序的官网上只有三列联动效果，所以才会有这篇文章

一. picker组件

<picker mode="multiSelector"  class='multiSelector' range-key="value"  range="{{provincesCityArr}}" bindcolumnchange="bindMultiPickerColumnChange"  bindchange="bindRegionChange" value="{{pickerValue}}">
      <view class="pickBox">
        <text>{{provinces}}</text>
        <text>——</text>
        <text>{{city}}</text>
        <text class="icon-right iconfont icon-youjiantou"></text>
      </view>
</picker>
  • picker使用的mode是multiSelector（多列选择器）
  • range-key（「选择器显示内容」主要用到的是属性名称）
  • provincesCityArr用于存放需要渲染到组件上的数据
  • pickerValue同上(pickerValue: [null, null], //要将picker中的value设置为[null,null]才能联动)

遇到的问题:

  • 无法获取到数据（就是数据不知道怎么渲染到组件中）
  • 获取到数据后，但是渲染出来的数据都是undefined

由于上面两个问题，导致我后面加班到9点多~~~~

无法获取到数据
小程序picker和picker-view组件

刚刚上面说的provincesCityArr这个数组是用来存放渲染数据，但是当时我并不清楚这个数组怎么存放数据；知道后面看了官网上的，才焕然大悟~~~

"data": [{
    "label": "00",
    "value": "全部省",
    "children": [{
      "label": "00",
      "value": "全部市"
    }]
  }, {
    "label": "11",
    "value": "广东省",
    "children": [{
          "label": "1101",
          "value": "广州市",
              "children": [{
                "label": "110101",
                "value": "天河区"
              }]
    }]}
}]


// 初始化省市
  initMultArray(data) {
    console.log(data)
    var firstarr = [];//这个用于存放省
    var secondarr = [];//这个用于存放市
    var pickerValue = [
      [],
      []
    ];//pickerValue[0]存放省，pickerValue[1]存放市，
    // 获取省
    for (var i = 0; i < data.length; i++) {
       //必须以对象的形式存放到数组中，value适用于渲染到组件上的属性
      firstarr.push({
        label: data[i].label,
        value: data[i].value //广东省
      })
    }
    // 获取市 
    for (var j = 0; j < data.length; j++) {
      let secondArr = []
      for (var z = 0; z < data[j].children.length; z++) {
        secondArr.push({
          label: data[j].children[z].label,
          value: data[j].children[z].value //广州市
        })
      }
      secondarr.push(secondArr)
    }
    //这里的secondarr[0]使用第一个默认值-->全部市
    pickerValue = [firstarr, secondarr[0]]
    this.setData({
      provincesCityArr: pickerValue,
      firstarr,
      secondarr
    })
  },

使用bindcolumnchange进行联动选择

//联动-列表改动时
  bindMultiPickerColumnChange(e) {
      //获取当前列
    let column = e.detail.column
    //获取当前列上的值
    let value = e.detail.value
    let pickerValue = []
    let provinces = ''
 //判断是否为第一列时，需不需要改变pickerValue[0]的数据
    if (column == 0) {
      pickerValue = [this.data.firstarr, this.data.secondarr[value]]
       //获取省的值
      provinces = this.data.firstarr[value].value
      this.setData({
        provincesCityArr: pickerValue,
        provinces,
        secondarrNum:value
      })
      console.log('provincesCityArr',pickerValue)
      console.log('pickerValue',pickerValue)
    } else {
      console.log(this.data.secondarr[this.data.secondarrNum][value].value)
      this.setData({
        city: this.data.secondarr[this.data.secondarrNum][value].value
      })
    }
  },

二. picker-view组件

  1. picker-view组件，是一个页面上的滚动选择器；

  2. 如果想进行滚动：他的子元素必须是 picker-view-column 组件；

  3. picker-view-column组件：只是提供了一个可视的范围，如果想进行滚动；

  4. picker-view-column组件的属性：

    属性 类型 描述
    value 数组 数组中的数字依次表示 picker-view 组件中，picker-view-column组件中的第几项，如果数字大于选项，则使用最后的选项
    indicator-style 字符串 设置选择器中间选中框的「样式」
    indicator-class 字符串 设置选择器中间选中框的「类名」

  5. 事件

    事件名 事件触发时间
    bindchange 滚动选择时，触发change事件
    bindpickstart 当滚动选择开始时，触发事件
    bindpickend 当滚动选择结束时，触发事件 
 <view class='pickerview' hidden="{{!isShowPicker}}">
    <view class="bodyTitle">申请主体</view>
    <picker-view indicator-class='pickerCol' value="{{value}}" bindchange="bindPickerChange">
        <picker-view-column>
            <view wx:for="{{Applicant}}" style="line-height: 50px">{{item}}</view>
        </picker-view-column>
    </picker-view>
    <view class='btns'>
        <view class="cancelBtn" bindtap="cancleBtn">取消</view>
        <view bindtap="deterBtn">确定</view>
    </view>
</view>
小程序picker和picker-view组件

也能通过picker-view-column来设置多少列

小程序picker和picker-view组件

也可以用通过样式来修改(其中的pickerCol是选中的样式)

.pickerview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease-in-out;
}

picker-view {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #FFF;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
    height: 652rpx;
    border-radius: 30rpx 30rpx 0 0;
    z-index: 999;
}

picker-view-column {
    border-radius: 30rpx 30rpx 0 0;
    color: #444444;
    font-size: 28rpx;
}

.pickerCol {
    width: 90%;
    height: 96rpx;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-color: #0A8FF6;
    margin-left: 5%;
}

.btns {
    width: 100%;
    height: 100rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0;
    z-index: 1000;
    border-top: 1px solid #CCCCCC;
    box-sizing: border-box;
    background-color: #fff;
}

.btns view {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    color: #333;
}

.cancelBtn {
    border-right: 1px solid #CCCCCC;
    box-sizing: border-box;
}

.bodyTitle {
    width: 100%;
    line-height: 83rpx;
    background-color: #fff;
    position: absolute;
    bottom: 46%;
    color: #333;
    font-size: 28rpx;
    text-align: center;
    z-index: 9999;
    border-radius: 30rpx 30rpx 0 0;
}

属性说明

Applicant / bindPickerChange

用于渲染数据
Applicant: ['个人', '工作室', '量体师', '公司', '企业', '其他'], //用于申请主体的picker-view-column

列表选择 
bindPickerChange: function (e) {
    let val = parseInt(e.detail.value)
    console.log('picker下拉项发生变化后，下标为：', val+1)
    let Applicantindex = val + 1
    this.setData({
      Applicantindex
    })
  },

欢迎交流

小程序picker和picker-view组件