微信小程序picker选择器获取值的2种方法示例
更新时间:2023年03月02日 09:44:40 作者:小白兔不爱吃菜
picker为用户提供了多个选择,用户选了其中一种,但仍是需要有东西去告诉后台用户选了什么,下面这篇文章主要给大家介绍了关于微信小程序picker选择器获取值的2种方法,需要的朋友可以参考下
想要实现的效果:
在选择器选择合适的选项后,页面显示所选择的内容
第一种方法:
//wxml页面 <picker bindchange="PickerChange" value="{{index}}" range="{{picker}}"> <!-- <view class="text3">{{picker?picker[index]:''}}</view> --> <view class="txt">{{city}}</view> <image class="image-jiantou1" src="././image/箭头.png"></image> </picker>
//js页面 data: { picker:['杭州','上海','北京'], index:null, city:'杭州' }, PickerChange(e){ console.log(e) this.setData({ index:e.detail.value }) if(this.data.index==0){ this.setData({ city:'杭州' }) } else if(this.data.index==1){ this.setData({ city:'上海' }) }else{ this.setData({ city:'北京' }) } },
我们获取到的是picker选择器内容相对应的value值,所以想要获取相对应的内容,还要在进行一次赋值,若是选项较少还可以使用,那要是有十几个选项呢?这样也太麻烦了,且看第二种方法
第二种方法:获取到的value值是对应的picker数组的下标值,这样根据获得到的下标获得相对应的值
PickerChange(e){ this.setData({ city:this.data.picker[e.detail.value] }) },
总结
到此这篇关于微信小程序picker选择器获取值的2种方法的文章就介绍到这了,更多相关微信小程序picker选择器获取值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
ArrayBuffer Uint8Array Blob与文本字符相互转换示例
这篇文章主要为大家介绍了ArrayBuffer Uint8Array Blob与文本字符相互转换示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-06-06javascript中的replace函数(带注释demo)
在js中有两个replace函数 一个是location.replace(url) 跳转到一个新的url.一个string.replace("xx","yy") 替换字符串 返回一个新的字符串,该方法并不改变字符串本身。下面通过本文给大家介绍javascript中的replace函数2018-01-01
最新评论