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

这篇具有很好参考价值的文章主要介绍了微信小程序picker组件的简单使用 单选。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

<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就是重点 修改成你要显示的字段文章来源地址https://www.toymoban.com/news/detail-659892.html

  //班级选择
  bindClassChange: function (e) {
    const classIndex = e.detail.value;
    this.setData({
      classIndex
    });
  },

到了这里,关于微信小程序picker组件的简单使用 单选的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序picker组件遇到的问题以及解决办法

    先来看一下官方文档中picker的基本概念: 从底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器。 重要属性 range: 选取范围,数据类型为Array / Object Array,mode为 普通选择器 时,range 有效; value:

    2024年02月11日
    浏览(49)
  • 【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)

    💌 所属专栏:【微信小程序开发教程】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘   大家好,又见面了,

    2023年04月16日
    浏览(45)
  • 微信小程序 picker-view 组件构建一个上下拖动选择器

    picker-view是官方的一个选择器组件 支持多级选择 当然也可以单项选择 我们先来看看是个什么东西吧 简单写一个 wxml代码 js定义一个事件 然后 界面效果就是这样的 我们可以鼠标往上拖 例如 我们第二个选择B 当我们鼠标拖动后 松开那一刻 pickerChange就会触发 他会给你一个数组

    2024年02月08日
    浏览(44)
  • 在微信小程序使用picker实现日期选择

    而且选择开始时间后,选择结束时间,能够选择的日期不能比开始日期还要早。要实现以上效果可这样写: 在wxml中写

    2024年02月16日
    浏览(63)
  • 微信小程序picker表单选择器的使用

    微信小程序picker表单选择器的使用 微信小程序picker表单选择器的使用 bindchange:当选择项改变时触发的方法 range:选项数组可以是二维数组 range-key:如果是二维数组时,用此属性指定第二维数组的键以达到在选择项中显示这个键对应的键值 value:是当前值是当前选中的数组的索

    2024年02月16日
    浏览(51)
  • 前端Vue自定义商品评价页面单选多选标签tags组件单选多选按钮选择器picker组件

    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。 通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随

    2024年02月16日
    浏览(67)
  • 微信小程序 实现最简单的组件拖拽

    最近在自主学习微信小程序的开发;对于零基础入门(没有学习过前端)的我,查阅了许多微信小程序拖拽的实现,大部分要么实现起来太复杂了,要么封装组件太复杂了,附带了拖拽之后排序等功能;因此写下这篇个人觉得最好理解的 微信小程序元素拖拽的实现; 这边采用了

    2024年02月09日
    浏览(60)
  • uni-app uni-ui 微信小程序 uni-datetime-picker 时间选择组件设置start和end属性,实现时间选择限制

     效果如图,先选择开始日期,完成日期需要在开始日期之后,先选择完成日期,开始日期需要在完成日期之前 需要用到uni-datetime-picker官方的三个属性  代码如下 这样一个能够限制选定范围的组件就ok了!    

    2024年02月11日
    浏览(65)
  • 微信小程序——实现单选、多选

    单选使用radio-group标签包裹radio标签 多选使用checkbox-group 标签包裹checkbox标签  单选和多选的wxml代码 以下是wxss代码

    2024年02月06日
    浏览(49)
  • 微信小程序:实现单选按钮

    样式: wxml 核心代码: 注解: bindchange:有变化执行事件 wx:for-items:表示对{{items}}进行循环 radio中的color属性:主要设置选中之后图标颜色 radio中的style属性:这里主要用来展示图标的大,scale缩放 radio中的value属性:主要用于事件bindchange执行之后能获取到值 radio中的checked属性

    2024年02月07日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包