微信小程序 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>