微信小程序picker選擇器獲取值的2種方法示例
更新時(shí)間：2023年03月02日 09:44:40 作者：小白兔不愛吃菜
picker為用戶提供了多個選擇,用戶選了其中一種,但仍是需要有東西去告訴后臺用戶選了什么,下面這篇文章主要給大家介紹了關(guān)于微信小程序picker選擇器獲取值的2種方法,需要的朋友可以參考下
想要實(shí)現(xiàn)的效果：
在選擇器選擇合適的選項(xiàng)后，頁面顯示所選擇的內(nèi)容
第一種方法：
//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選擇器內(nèi)容相對應(yīng)的value值，所以想要獲取相對應(yīng)的內(nèi)容，還要在進(jìn)行一次賦值，若是選項(xiàng)較少還可以使用，那要是有十幾個選項(xiàng)呢？這樣也太麻煩了，且看第二種方法
第二種方法：獲取到的value值是對應(yīng)的picker數(shù)組的下標(biāo)值，這樣根據(jù)獲得到的下標(biāo)獲得相對應(yīng)的值
PickerChange(e){
this.setData({
city:this.data.picker[e.detail.value]
})
},總結(jié)
到此這篇關(guān)于微信小程序picker選擇器獲取值的2種方法的文章就介紹到這了,更多相關(guān)微信小程序picker選擇器獲取值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Bootstrap Table使用整理（四）之工具欄的相關(guān)資料,需要的朋友可以參考下2017-06-06
DVA框架統(tǒng)一處理所有頁面的loading狀態(tài)
dva 有一個管理 effects 執(zhí)行的 hook，并基于此封裝了 dva-loading 插件。下面通過本文給大家分享DVA框架統(tǒng)一處理所有頁面的loading狀態(tài)，感興趣的朋友一起看看吧2017-08-08
獲取DOM對象的幾種擴(kuò)展及簡寫...2006-10-10
下面小編就為大家?guī)硪黄猨s獲取隱藏元素寬高的實(shí)現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
詳解JavaScript的Symbol類型、隱藏屬性、全局注冊表
這篇文章主要介紹了JavaScript的Symbol類型、隱藏屬性、全局注冊表,本文主要對其使用方法和使用場景做個簡單的介紹，需要的朋友可以參考下2022-05-05
這篇文章主要給大家介紹了關(guān)于JavaScript中fetch方法的相關(guān)資料,JavaScript中的fetch()方法用于向服務(wù)器請求并加載網(wǎng)頁中的信息,請求可以是返回JSON或XML格式數(shù)據(jù)的任何API,需要的朋友可以參考下2023-10-10
JavaScript求一個數(shù)組中重復(fù)出現(xiàn)次數(shù)最多的元素及其下標(biāo)位置示例
這篇文章主要介紹了JavaScript求一個數(shù)組中重復(fù)出現(xiàn)次數(shù)最多的元素及其下標(biāo)位置,涉及javascript數(shù)組元素遍歷、判斷、正則過濾、追加等相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
省市區(qū)三級聯(lián)動下拉框菜單javascript版
這篇文章主要給大家介紹了javascript實(shí)現(xiàn)省市區(qū)三級聯(lián)動下拉框菜單，有需要的朋友可以參考下2015-08-08
js統(tǒng)計(jì)頁面的來訪次數(shù)實(shí)現(xiàn)代碼
這篇文章主要介紹了如何使用js統(tǒng)計(jì)頁面的來訪次數(shù),需要的朋友可以參考下2014-05-05
這篇文章主要為大家詳細(xì)介紹了原生js仿寫手機(jī)端下拉刷新，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08