微信小程序 picker選擇器出現object

js  先簡單定義兩個數組

// pages/home/home.js
const app = getApp();
Page({
  data: {
    lesson: ['美國', '中國', '巴西', '日本'],
    index: 0,
  },
  /*** 生命週期函數--監聽頁面加載*/
  onLoad: function (options) {
    var that = this;
    var courselist = [
      {
        id: 1,
        title: '移動雙核',
        keshi: '2',
        startime: '03月20日12:00',
        img: "../../resource/images/icon/delet01.png"
      }, {
        id: 2,
        title: '手機雲',
        keshi: '2',
        startime: '03月20日16:00',
        img: "../../resource/images/icon/delet02.png"
      },
      {
        id: 3,
        title: 'PC雲',
        keshi: '2',
        startime: '03月20日18:00',
        img: "../../resource/images/icon/delet02.png"
      }
    ];
    // 數據顯示
    that.setData({
      courselist: courselist,
    })
  },
  onChangeLessonTab(e) {
    console.log('picker發送選擇改變，攜帶值爲', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },
})

range就是數組名，value是元素自帶的下標，range-key是在數組對象是object的情況下，簡單來說就是二維數組

其一，如果picker選擇器需要拿二位數組中的title來選擇，則需要用到range-key屬性，寫法如下：

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

 其二，如果picker選擇器需要用的數組是類似lesson的數組，就簡單很多，也就不需要用range-key屬性，寫法如下：

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