Wechat applet picker selector appears object

js first simply define two [arrays]

// pages/home/home.js
const app = getApp();
Page({
  data : {
     lesson : [ 'America' , 'China' , 'Brazil' , 'Japan' ],
     index : 0 ,
  },
  /*** Lifecycle function -- monitor page load*/ 
  onLoad: function ( options ) {
     var that = this ;
     var courselist = [
      {
        id : 1 ,
         title : 'Mobile Dual Core' ,
         keshi : '2' ,
         startime : '03/20 12:00' ,
         img : "../../resource/images/icon/delet01.png"
      }, {
        id : 2 ,
         title : 'Mobile Cloud' ,
         keshi : '2' ,
         startime : '03/2016:00' ,
         img : "../../resource/images/icon/delet02.png"
      },
      {
        id : 3 ,
         title : 'PCCloud' , keshi :
         ' 2' ,
         startime : '03/20 18:00' ,
         img : "../../resource/images/icon/delet02.png"
      }
    ];
    // Data Display
    that.setData({
      courselist: courselist,
    })
  },
  onChangeLessonTab(e) {
    console .log( 'picker sends selection changes with value' , e.detail.value)
     this .setData({
       index : e.detail.value
    })
  },
})

The range is the name of the array, the value is the subscript that comes with the element, and the range-key is a two-dimensional array when the array object is an object.

First, if the picker [selector] needs to select the title in the two-digit array, it needs to use the range-key attribute, which is written as follows:

<view class="input-item">
     <text class = "input-txt" >Course selection:</text>
     <picker bindchange="onChangeLessonTab" class="input-el" range="{{courselist}}" range-key="title" value="{{index}}">
         <view class="picker">{{courselist[index].title}}</view>
     </picker>
</view>

Second, if the array required by the picker selector is an array similar to lesson, it is much simpler, and there is no need to use the range-key attribute, which is written as follows:

<view class="input-item">
     <text class = "input-txt" >Course selection:</text>
     <picker bindchange="onChangeLessonTab" class="input-el" range="{{lesson}}" value="{{index}}">
          <view class="picker">{{lesson[index]}}</view>
     </picker>
</view>

Leave a Comment

Your email address will not be published. Required fields are marked *