Every Friday afternoon, sit by the computer, brew a cup of hot tea, can not restrain the excitement of the mood, for the weekend rest do not go to work? No, quiet environment is for better study!!

Convenient picker

Picker component can be very convenient to help us achieve province, date and time, multi-column selector, next we come to achieve a dynamic data multi-column selector.

rendering

Let’s start with the renderings

interaction

First, the user clicks the button to select the car purchase store and selects the provincial region. Then, the selected provincial key serves as the query condition to obtain the municipal data. Then, the selected municipal key is used to query the store data.

The data structure

The data structure from the back end is the same. It looks like this

We use the value of each piece of data for display, use key for request, and finally obtain the key of the selected store, and then throw a backend buddy for saving.

wxml

Come here, follow my rhythm, let me see your hands, ah, did not let you play rhythm, is to type the code 🤗️🤗️

<picker mode="multiSelector" range="{{multiArray}}" bindcolumnchange="columnchange" value="{{multiIndex}}" bindchange='pickchange'>
  <view class='right' wx:if="{{multiArray[2][multiIndex[2]] && step == 0}}"> <text> Please select </text> </view> <view class="picker" wx:if="{{multiArray[2][multiIndex[2]] && step == 1}}">
        <text>{{multiArray[2][multiIndex[2]]}}</text>
      </view>
</picker>
Copy the code

As usual, tell me what the code does

The picker component is used to create a scroll selector that pops up from the bottom. Mode =”multiSelector” is used to declare that we’re creating a multi-column selector. Range =”{{multiArray}}” Value =”{{multiIndex}}” multiIndex =”{{multiIndex}}” multiIndex =”{{multiIndex}}” Bindcolumnchange Event triggered when the value of each column changes

If you need a perfect explanation, please go to 👇 for the full API

Two friends

bindcolumnchange

Bindcolumnchange is used to bind events triggered when each column is changed

Columnchange (e){console.log(e.daily. column) // {column: 2, value: 1} switch (e.daily. column) {// The number of columns to change at this timecase0: // Process logicbreak;
      case1: // process logicbreak; } this.setData({// update data})}Copy the code

The value of column indicates the number of columns changed (subscripts start at 0), and the value of value indicates the subscript of the changed value

bindchange

Bindchange is used to bind events triggered by value changes. It’s pretty neat

pickchange(e){ // When the picker sends a selection change, it triggers e.daily. value to fetch the value it carries
    console.log(e.detail.value)  / / [0]
    this.setData({
      multiIndex: e.detail.value  // Just update it})}Copy the code

logic

Knowing the above two small friends, we will trace the train of thought, and then to move bricks to build a house. The realization is generally divided into the following steps:

1. Load the provincial data, process it and place it in multiArray. Store the original data and request the city-level data with the key of the first data. Write columnchange and pickchange functions to handle selector changes. 3. After the page is loaded, call the function to fetch provincial data, which itself will fetch municipal and store data

If the above do not understand, can be combined with the final code to understand

The complete code

Var app = getApp() Page({data: {multiArray:[], // multiIndex:[0, 0, 0], // default subscript step:0, // default display please select}, onLoad:function(options) {this.getprovince () // call the function to get the provincial data when the page is loaded},getProvince(){// get the province app.util. Ajax ('/gw/app/saler/store/province_list'.' '.'post'Var provinceArr = data.map((item) => {var provinceList = [...data] var provinceList = data.map((item) => {returnItem.value}) this.setData({multiArray: [provinceArr, [], []])Jiangsu Province.'Fujian'],[],[]] provinceList, }) var defaultCode = this.data.provincelist [0].keyif(defaultCode){ this.setData({ currnetProvinceKey: GetCity (defaultCode) // Get municipal data}})}, GetCity (code){this.setData({currnetProvinceKey: code // save the current selected city code}) app.util. Ajax ('/gw/app/saler/store/city_list', { provinceCode: code }, 'post', { 'content-type': 'application/x-www-form-urlencoded' }).then((data) => {
      var cityArr = data.map((item) => { returnitem.value }) var cityList = [...data] this.setData({ multiArray: [this.data.provinceArr, cityArr, []], //Jiangsu Province.'Fujian'], ['Xuzhou'}) var defaultCode = this.data.cityList[0].keyif(defaultCode){ this.setData({ currnetCityKey: }) this.getStore(defaultCode)}}, GetStore (code){this.setData({currnetCityKey: code // Update the currently selected city-level key}) app.util. Ajax ('/gw/app/saler/store/store_list', { cityCode: code }, 'post', { 'content-type': 'application/x-www-form-urlencoded' }).then((data) => {
      var storeList = [...data]
      var storeArr = data.map((item) => { returnItem.value}) this.setData({multiArray: [this.data.provincearr, this.data.cityarr, storeArr], // reassign the value of this arrayJiangsu Province.'Fujian'], ['Xuzhou'], ['The First Store in Xuzhou'.'The Second Xuzhou Store'[] storeList, // Store store's original data Columnchange (e){var data = {multiIndex: columnData = {multiIndex: columndata = {multiIndex: JSON.parse(JSON.stringify(this.data.multiIndex)), multiArray: JSON.parse(JSON.stringify(this.data.multiArray)) } data.multiIndex[column] = e.detail.value; Switch (column){// Handle different logiccaseVar currentProvinceKey = this.data.provincelist [e.datel.value].keyif(currentProvinceKey ! = this. Data. CurrnetProvinceKey) {/ / whether the current key is real updated this. GetCity (currentProvinceKey) / / get the current key municipal data below} Data.multiindex [1] = 0 // Select the first one by defaultbreak;
      
      caseVar currentCitykey = this.data.cityList[e.daile.value].keyif(currentCitykey ! = this.data.currNetCityKey){this.getStore(currentCitykey)} data.multiindex [2] = 0break; } this.setData(data) // Update data}, pickchange(e){this.setData({step: 1, // update, select user selected store multiIndex: E.dail. value // update subscript field})},submit() {/ / save time Access to the currently selected stores can be key to back-end development var storeCode = this. Data. The storeList [. This data. MultiIndex. Length - 1]. The key}})Copy the code

conclusion

1. Using the Picker component to implement a multi-column selector is easy, just put the processing logic in the tall and powerful Bindcolumnchange.

2. You can encapsulate some common functions in Util files, such as ajax in the above code.

3. I haven’t thought about it yet.