微信小程序 picker选择器出现object

最新推荐文章于 2025-06-22 21:21:52 发布

原创最新推荐文章于 2025-06-22 21:21:52 发布 · 7.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #picker选择器 #object

基础专栏收录该内容

60 篇文章

订阅专栏

本文详细介绍了一种在小程序中实现课程选择功能的方法，通过使用picker组件并结合数组数据源，实现了课程列表的选择与显示。文章对比了不同数组类型（如普通数组与对象数组）在picker中的应用方式，并提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>