微信小程序——picker通过value返回你想获取的值

关于微信小程序中的picker使用方法可以访问:picker-小程序

从它的官方文档中,可以看出它返回的value值是它range的下标:

在项目中,我们大多数时候传的值并不是需要这个下标,而是其他的值。像我项目中,需要获取到的是它对应的teamId,那么我们如何通过它的这个下标值返回你想要的值呢?

项目需求如下图:

步骤如下:

 1.编写wxml文件

这是主要讲picker的功能,所以我只截了 picker 部分的wxml 代码了。

2.编写js文件

  a). 定义data

  

  b). 赋值

  c). 返回picker索引值

  d). 提交时通过索引值返回你想要的值

大概流程就是这样子了,如有不懂,欢迎留言~~

原文地址:https://www.cnblogs.com/sese/p/9260549.html

时间: 2024-11-01 14:14:17

微信小程序——picker通过value返回你想获取的值的相关文章

微信小程序picker组件 - 省市二级联动

微信小程序picker组件自带省市区选择器,但是业务需求需要省市选择器,参考官方demo自己写了一个省市选择器 wxml文件 <view class="section"> <view class="section__title">省市二级联动demo</view> <picker mode="multiSelector" bindchange="bindMultiPickerChange&quo

微信小程序把玩(三十八)获取设备信息 API

原文:微信小程序把玩(三十八)获取设备信息 API 获取设备信息这里分为四种, 主要属性: 网络信息wx.getNetWorkType, 系统信息wx.getSystemInfo, 重力感应数据wx.onAccelerometerChange, 罗盘数据wx.onCompassChange wxml <button type="primary" bindtap="getNetWorkType">获取网络类型</button> <butt

微信小程序picker空白

如果你看完发现跟我遇到一样的问题,那么真的很奇葩 这个得从功能需求讲起 直接上图: 在 个人信息里面显示身高和体重,而且支持修改 我最开始想到的做法 直接使用微信小程序提供的组件picker(从屏幕下方弹出 的选择框) 我就比较懒,想一步选择两个属性,比如这样: 就是不管用户点击身高,还是体重,都是弹出这个进行选择修改,一步到位 那么我就给两个属性都绑定了一个picker,也使用同一组数据,大致代码: <picker mode="multiSelector" rang="

微信小程序:实现悬浮返回和分享按钮

效果图: 数据: 依赖微信小程序接口wx.redirectTo.onShareAppMessage来完成 跳转接口: https://developers.weixin.qq.com/miniprogram/dev/api/wx.redirectTo.html?search-key=redirectTo 前端处理: 1.设置两个按钮 2.绑定对应的事件 wxml代码: css代码: ###js 代码: 代-码-下载:https://pan.baidu.com/s/1GYntkS83UadLjUY

微信小程序详细图文教程-10分钟完成微信小程序开发部署发布(3元获取腾讯云服务器带小程序支持系统)

很多朋友都认为微信小程序申请.部署.发布很难,需要很长时间. 实际上,微信和腾讯云同是腾讯产品,已经提供了10分钟(根据准备资源情况,已完成小程序申请认证)完成小程序开发.部署.发布的方式.当然,实现的是基础功能.但是,可以给学习者很便捷的体验和很好的启发. 不过,随着微信平台和云服务的发展,真担心,程序猿会失业! 目录 一.微信小程序申请 二.服务器设置(申请.部署.域名) 1.申请服务器 2.部署服务器 3.域名申请和配置 三.小程序发布 1.下载DEMO 2.下载开发工具并安装 3.配置参

微信小程序如何把后台返回的多条json数据的时间戳转换为时间放到页面上 (微信小程序 时间戳转换为时间)

小程序端 在utils文件夹下的util.js写入 //时间戳转换时间   function toDate(number){   var n=number * 1000;   var date = new Date(n);   var Y = date.getFullYear() + '/';   var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '/';   var D = date

第五章 “我要点爆”微信小程序云开发实例之从云端获取数据制作首页

下面我们来实现从云端获取数据,完成首页世界页面index的制作,首页分为4个数据列表导航页面,页面具体内容如下: 推荐:为用户推荐最新的点爆信息,它包含文本点爆内容和语音点爆内容. 文爆:筛选出文字点爆内容,只显示文字点爆内容. 音爆:筛选出语音点爆内容,只显示语音点爆内容. 爆榜:将点爆内容取出前20名进入排行. [实现页面内数据列表的滚动和导航切换后,每个导航下数据列表都在顶部] 由于我们使用的头部导航栏是通过数据绑定在同一页面进行切换,所以当一个页面内数据列表向下滚动后,切换导航后页面的s

微信小程序picker下拉绑定数据

页面部分,wxml中写入以下代码 <picker mode = "selector" bindchange="bindPickerChange" value="{{project[idx].id}}" range="{{project}}" range-key="{{'val'}}"> <view class="picker picker1"> {{project

小程序 picker 多列选择器 数据动态获取

需求是将各校区对应各班级的数据 以两列选择器的方式展示出来,并且可以在选择完成之后记录选结果参数. 校区数据 和 班级数据 分别是两个接口,以 校区 teach_area_id 字段关联 其各班级数据 <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value=&quo