微信小程序picker组件的简单使用 单选

html 复制代码
<picker mode="selector" range="{{classData}}" bindchange="bindClassChange" value="{{classIndex}}" range-key="className">
  <view class="picker">
    {{classData[classIndex].className || '请选择班级'}}
  </view>
</picker> 

classData是接口请求的数组 如果picker显示的值是[object,object]这样的 range-key="className"

range-key就是重点 修改成你要显示的字段

javascript 复制代码
  //班级选择
  bindClassChange: function (e) {
    const classIndex = e.detail.value;
    this.setData({
      classIndex
    });
  },
相关推荐
AI大法师25 分钟前
证件照如何制作?方法来了:一寸、二寸标准证件照、旅游签证、职业资格考试都可
微信小程序
2501_915909064 小时前
网络调试工具推荐 Fiddler抓包工具使用教程与代理设置详解(HTTP/HTTPS配置与实战技巧)
网络·http·ios·小程序·fiddler·uni-app·webview
老师可可6 小时前
成绩发布工具使用方法,附成绩分析教程
学习·信息可视化·小程序·excel·学习方法
sen_shan8 小时前
《微信小程序》第八章:“我的“设计
微信小程序·小程序
咸虾米12 小时前
在unicloud的云对象中如何调用同一服务空间内的另外其他云对象
javascript·微信小程序·前端框架
weixin_1772972206912 小时前
盲盒小程序系统开发:助力品牌拓展新市场
小程序·盲盒
一 乐12 小时前
口腔健康系统|口腔医疗|基于java和小程序的口腔健康系统小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·小程序·毕设
Aress"12 小时前
uniapp 生成二维码图片[APP+H5+小程序等 全端适配]
小程序·uni-app
小小王app小程序开发12 小时前
旧衣回收小程序的技术架构与商业落地:开发者视角的全链路解析
小程序·架构
sen_shan14 小时前
《微信小程序》第七章:TabBar设计
微信小程序·小程序