Applet scroll selector that pops up from the bottom

The reason why I want to write this article is because I met a requirement (to achieve the linkage effect of two columns) when I was doing a project before, but there are only three columns of linkage effect on the official website of the small program, so I will have this article

Picker component

<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> Copy the code
  • The mode that the picker uses is a multiSelector
  • Range-key (” selector display content “mainly uses the property name)
  • ProvincesCityArr is used to hold data that needs to be rendered to a component
  • PickerValue same as above (pickerValue: [null,null], // Must be set to [null,null] in picker to linkage)

Problems encountered:

  • Unable to fetch data (i.e. data does not know how to render to component)
  • Get the data, but render the data is undefined

As a result of the above two problems, lead to my back to work overtime to 9 more ~~~~

Unable to get data

The provincesCityArr array is used to store render data, but I didn’t know how to store render data. After I read the official website, I was enlightened ~~~

"data": [{
    "label": "00".    "value": "All provinces".    "children": [{
      "label": "00". "value": "Whole city"  }]  }, {  "label": "11". "value": "Guangdong province". "children": [{  "label": "1101". "value": "Guangzhou". "children": [{  "label": "110101". "value": "Tianhe District"  }] }}]}] Copy the code
// Initialize the province
  initMultArray(data) {
    console.log(data)
    var firstarr = [];// This is used to store the province
    var secondarr = [];// This is used to store the market
 var pickerValue = [ []. []  ];PickerValue [0] pickerValue[1] pickerValue[0] pickerValue[1] pickerValue  / / get province  for (var i = 0; i < data.length; i++) {  // Must be stored as an object in an array. Value applies to attributes rendered to components  firstarr.push({  label: data[i].label,  value: data[i].value / / in guangdong province  })  }  / / for the city  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 / / guangzhou  })  }  secondarr.push(secondArr)  }  Secondarr [0] uses the first default value --> all markets  pickerValue = [firstarr, secondarr[0]]  this.setData({  provincesCityArr: pickerValue,  firstarr,  secondarr  })  },  Copy the code

Use bindcolumnchange for linkage selection

// Linkage - When the list changes
  bindMultiPickerColumnChange(e) {
      // Get the current column
    let column = e.detail.column
    // Get the value on the current column
 let value = e.detail.value  let pickerValue = []  let provinces = ' '  // If pickerValue[0] is the first column, change the pickerValue[0]  if (column == 0) {  pickerValue = [this.data.firstarr, this.data.secondarr[value]]  // Get the province 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  })  }  }, Copy the code

Picker-view component

  1. The picker-View component, which is a scroll selector on a page;

  2. To scroll: its child must be a picker-view-column;

  3. Picker-view-column component: just provides a visual range if you want to scroll;

  4. Picker-view-column component properties:

    attribute type describe
    value An array of The numbers in the array indicate the number of items in the picker-View component and the picker-view-column component in turn. If the number is greater than the option, the last option is used
    indicator-style string Set the checkbox in the middle of the selector“style“
    indicator-class string Set the checkbox in the middle of the selector“The name of the class“

  5. The event

    The event name Event trigger time
    bindchange When scrolling through the selection, the change event is emitted
    bindpickstart An event is emitted when the scrolling selection begins
    bindpickend An event is emitted when the scrolling selection ends 
 <view class='pickerview' hidden="{{! isShowPicker}}">
    <view class="bodyTitle">To apply for the subject</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">cancel</view>  <view bindtap="deterBtn">determine</view>  </view> </view> Copy the code

You can also set the number of columns by picker-view-column


You can also modify by style (where pickerCol is the selected style)

.pickerview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
 height: 100%;  background-color: rgba(0, 0, 0, 0.3);  transition: all 0.3 s 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; } Copy the code

Attributes that

Applicant / bindPickerChange

Used to render dataApplicant: ['personal'.'Studio'.'Weighter'.'the company'.'companies'.'other'].// Picker-view-column for the application body

A list of choicesbindPickerChange: function (e) {
 let val = parseInt(e.detail.value)  console.log('Picker pull-down changes with subscript:', val+1)  let Applicantindex = val + 1  this.setData({  Applicantindex  })  }, Copy the code

Welcome to communicate


This article is formatted using MDNICE