微信小程序使用picker組件出現(xiàn)的問(wèn)題探究
一、picker基本概念
先來(lái)看一下官方文檔中picker的基本概念：
從底部彈起的滾動(dòng)選擇器，現(xiàn)支持三種選擇器，通過(guò)mode來(lái)區(qū)分，分別是普通選擇器，時(shí)間選擇器，日期選擇器，默認(rèn)是普通選擇器。
重要屬性
- range： 選取范圍，數(shù)據(jù)類型為Array / Object Array，mode為 普通選擇器 時(shí)，range 有效；
- value： value 的值表示選擇了 range 中的第幾個(gè)（下標(biāo)從 0 開(kāi)始），數(shù)據(jù)類型肯定是Number；
- bindchange： 綁定事件，value 改變時(shí)觸發(fā) change 事件，event.detail = {value: value}。
- mode：選擇器類型，可以是selector（ 普通選擇器）、multiSelector（多列選擇器）、date（時(shí)間選擇器）、time（日期選擇器）、region（省市區(qū)選擇器）；
二、遇到的問(wèn)題
問(wèn)題說(shuō)在前面，同一個(gè)頁(yè)面使用多個(gè)普通選擇器遇到了問(wèn)題，選擇一個(gè)選項(xiàng)，其他選項(xiàng)也跟隨著改變了。
代碼如下：
//picker.wxml：
<view class="column_list" >
<text class="font15">選項(xiàng)一</text>
<picker class="inputText" bindchange="bindchange1" value="{{index}}" range="{{option1}}">
<view class="select_picker">
{{option1[index]}}
<image mode="aspectFit" class="select_arrow" src="../../images/select_arrow.png"></image>
</view>
</picker>
</view>
<view class="column_list" >
<text class="font15">選項(xiàng)二</text>
<picker class="inputText" bindchange="bindchange1" value="{{index}}" range="{{option2}}">
<view class="select_picker">
{{option2[index]}}
<image mode="aspectFit" class="select_arrow" src="../../images/select_arrow.png"></image>
</view>
</picker>
</view>
<view class="column_list" >
<text class="font15">選項(xiàng)三</text>
<picker class="inputText" bindchange="bindchange1" value="{{index}}" range="{{option3}}">
<view class="select_picker">
{{option3[index]}}
<image mode="aspectFit" class="select_arrow" src="../../images/select_arrow.png"></image>
</view>
</picker>
</view>
//picker.js
Page({
data: {
index:0,//設(shè)置索引值默認(rèn)為0
option1: ['1', '2', '3','4','5'],
option2: ['一', '二', '三','四','五'],
option3: ['①', '②', '③','④','⑤'],
},
bindchange1:function (e) {
// console.log('picker發(fā)送選擇改變，攜帶值為', e.detail.value)
// 設(shè)置這個(gè)攜帶值賦值給索引值index
// 所以option1 ,option2 ,option3的索引值都是一樣的
this.setData({
index: e.detail.value
})
}
})
因?yàn)槟J(rèn)索引值（也叫“下標(biāo)”）都是index，綁定事件也只是改變了index。所以改變一個(gè)選項(xiàng)，其他選項(xiàng)都跟著改變了。
三、如何解決
首先想到的解決辦法就是自定義不同的索引值index1、index2,、index3，分別綁定不同的時(shí)間bindchange1、bindchange2、bindchange3改變其對(duì)應(yīng)的索引值。
代碼如下：
//picker.wxml：
<view class="column_list" >
<text class="font15">選項(xiàng)一</text>
<picker class="inputText" bindchange="bindchange1" value="{{index1}}" range="{{option1}}">
<view class="select_picker">
{{option1[index1]}}
<image mode="aspectFit" class="select_arrow" src="../../images/select_arrow.png"></image>
</view>
</picker>
</view>
<view class="column_list" >
<text class="font15">選項(xiàng)二</text>
<picker class="inputText" bindchange="bindchange2" value="{{index2}}" range="{{option2}}">
<view class="select_picker">
{{option2[index2]}}
<image mode="aspectFit" class="select_arrow" src="../../images/select_arrow.png"></image>
</view>
</picker>
</view>
<view class="column_list" >
<text class="font15">選項(xiàng)三</text>
<picker class="inputText" bindchange="bindchange3" value="{{index3}}" range="{{option3}}">
<view class="select_picker">
{{option3[index3]}}
<image mode="aspectFit" class="select_arrow" src="../../images/select_arrow.png"></image>
</view>
</picker>
</view>
// picker.js
Page({
data: {
index1:0,
index2:0,
index3:0,
option1: ['1', '2', '3','4','5'],
option2: ['一', '二', '三','四','五'],
option3: ['①', '②', '③','④','⑤'],
},
bindchange1:function (e) {
this.setData({
index1: e.detail.value
})
},
bindchange2:function (e) {
this.setData({
index2: e.detail.value
})
},
bindchange3:function (e) {
this.setData({
index3: e.detail.value
})
}
})
這樣一個(gè)頁(yè)面多個(gè)picker的問(wèn)題就解決了，但是現(xiàn)在又發(fā)現(xiàn)了一個(gè)新的問(wèn)題：
為什么多個(gè)picker會(huì)出現(xiàn)相互影響的問(wèn)題？比如在第一個(gè)選擇器選擇了3，剩下的選擇器點(diǎn)進(jìn)去默認(rèn)都是從第3個(gè)開(kāi)始？” 小程序開(kāi)發(fā)工具中的確存在，看了社區(qū)的帖子，才知道這個(gè)是官方的bug，目前還沒(méi)有修復(fù)。
四、延伸
在這里使用了多個(gè)picker，可以想到使用wx:for循環(huán)，那么為了渲染方便，數(shù)據(jù)就要修改為對(duì)象的數(shù)組。
// picker.js
Page({
data: {
//每個(gè)對(duì)象就是一個(gè)選擇器，有自己的索引值index，標(biāo)題title，選項(xiàng)option（又是一個(gè)數(shù)組）
objArray:[
{
index:0,
title:'選項(xiàng)一',
option: ['1', '2', '3','4','5'],
},
{
index:0,
title:'選項(xiàng)二',
option: ['一', '二', '三','四','五'],
},
{
index:0,
title:'選項(xiàng)三',
option: ['①', '②', '③','④','⑤']
},
]
},
// 綁定事件，因?yàn)椴荒苡胻his.setData直接設(shè)置每個(gè)對(duì)象的索引值index。
// 所以用自定義屬性current來(lái)標(biāo)記每個(gè)數(shù)組對(duì)象的下標(biāo)
bindChange_select: function(ev) {
// 定義一個(gè)變量curindex 儲(chǔ)存觸發(fā)事件的數(shù)組對(duì)象的下標(biāo)
const curindex = ev.target.dataset.current
// 根據(jù)下標(biāo) 改變?cè)摂?shù)組對(duì)象中的index值
this.data.objArray[curindex].index = ev.detail.value
// 把改變某個(gè)數(shù)組對(duì)象index值之后的全新objArray重新 賦值給objArray
this.setData({
objArray: this.data.objArray
})
}
})
wx:for綁定數(shù)組objArray,當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為index，數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為item，為了區(qū)分選項(xiàng)option中的下標(biāo)
使用 wx:for-item 可以指定數(shù)組當(dāng)前元素的變量名為itm，使用 wx:for-index 可以指定數(shù)組當(dāng)前下標(biāo)的變量名為idx。
關(guān)鍵點(diǎn)是：自定義一個(gè)屬性對(duì)應(yīng)當(dāng)前下標(biāo) data-current=“{{idx}}”，綁定事件bindChange_select觸發(fā)時(shí)判斷出是哪個(gè)數(shù)組對(duì)象觸發(fā)的，就改變?cè)摂?shù)組對(duì)象中的index值。
//picker.wxml：
<view class="column_list mt_10" wx:for="{{objArray}}" wx:for-item="itm" wx:for-index="idx" >
<text class="font15">{{itm.title}} </text>
<picker class="inputText" bindchange="bindChange_select" value="{{itm.index}}" data-current="{{idx}}" range="{{itm.option}}" >
<view class="select_picker">
{{itm.option[itm.index]}}
<image mode="aspectFit" class="select_arrow" src="../../images/select_arrow.png"></image>
</view>
</picker>
</view>
五、效果圖
到此這篇關(guān)于微信小程序使用picker組件出現(xiàn)的問(wèn)題探究的文章就介紹到這了,更多相關(guān)小程序picker組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- 微信小程序自定義可搜索的picker組件示例詳解
- 微信小程序自定義yPicker組件實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)功能
- 微信小程序picker組件兩列關(guān)聯(lián)使用方式
- 微信小程序picker組件關(guān)于objectArray數(shù)據(jù)類型的綁定方法
- 微信小程序picker組件簡(jiǎn)單用法示例【附demo源碼下載】
- 微信小程序picker組件下拉框選擇input輸入框的實(shí)例
- 微信小程序 picker-view 組件詳解及簡(jiǎn)單實(shí)例
- 微信小程序 picker 組件詳解及簡(jiǎn)單實(shí)例
相關(guān)文章
在瀏覽器中使用JavaScript獲取本機(jī)IP地址是不可行的,因?yàn)闉g覽器的安全策略禁止JavaScript訪問(wèn)這樣的信息,這篇文章主要給大家介紹了關(guān)于JavaScript獲取本機(jī)IP地址的三種常用方式,需要的朋友可以參考下2023-12-12
淺談js中子頁(yè)面父頁(yè)面方法 變量相互調(diào)用
下面小編就為大家?guī)?lái)一篇淺談js中子頁(yè)面父頁(yè)面方法 變量相互調(diào)用。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
在layui中使用form表單監(jiān)聽(tīng)ajax異步驗(yàn)證注冊(cè)的實(shí)例
今天小編就為大家分享一篇在layui中使用form表單監(jiān)聽(tīng)ajax異步驗(yàn)證注冊(cè)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
本篇文章是對(duì)使用JS獲取IE上傳文件路徑的實(shí)現(xiàn)代碼進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-07-07
詳解javascript獲取url信息的常見(jiàn)方法
本篇文章主要對(duì)javascript獲取url信息的常見(jiàn)方法進(jìn)行介紹，具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧2016-12-12
教你巧用?import.meta?實(shí)現(xiàn)熱更新的問(wèn)題
import.meta?是一個(gè)給?JavaScript?模塊暴露特定上下文的元數(shù)據(jù)屬性的對(duì)象，它包含了這個(gè)模塊的信息，這篇文章主要介紹了巧用?import.meta?實(shí)現(xiàn)熱更新的問(wèn)題,需要的朋友可以參考下2022-04-04
JS如何實(shí)現(xiàn)動(dòng)態(tài)添加的元素綁定事件
這篇文章主要介紹了JS如何實(shí)現(xiàn)動(dòng)態(tài)添加的元素綁定事件,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
JS中的prototype與面向?qū)ο蟮膶?shí)例講解
JS中的prototype與面向?qū)ο蟮膶?shí)例講解，需要的朋友可以參考一下2013-05-05
一次微信小程序內(nèi)地圖的使用實(shí)戰(zhàn)記錄
這篇文章主要給大家介紹了關(guān)于一次微信小程序內(nèi)地圖使用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
js實(shí)現(xiàn)日期級(jí)聯(lián)效果
本篇文章主要是對(duì)js實(shí)現(xiàn)日期級(jí)聯(lián)效果的實(shí)例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01