微信小程序選擇器組件picker簡(jiǎn)單入門
picker組件的定義
picker組件是一種從底部向上彈起的滾動(dòng)選擇器。
picker組件的類型
在官方文檔中,有提供五種類型的picker組件,如普通選擇器,多列選擇器,時(shí)間選擇器,日期選擇器和省市區(qū)選擇器。
(猜測(cè)是,這些選擇器時(shí)不同的且常用的某種類型,于是就產(chǎn)生固定的模版)。
而在寫法上是這么寫滴, <picker mode="multiSelector" 其他屬性>
picker屬性
picker組件需要記錄當(dāng)前選擇,選擇的可允許范圍等等,而這些都是picker的一些相關(guān)的屬性。
共同的屬性
- picker為用戶提供了多個(gè)選擇,但用戶要從中選中其中一個(gè),value就這樣記載了用戶當(dāng)前選到的值。(它會(huì)初始化選擇器的值)
- picker為用戶提供了多個(gè)選擇,但有時(shí)為了構(gòu)造選擇器內(nèi)容的方便,picker可能會(huì)提供超出服務(wù)方所能服務(wù)到的實(shí)際范圍,于是在一些選擇器中,可以用一些屬性來(lái)限制用戶的選擇,使其鎖定到實(shí)際范圍內(nèi)。
- 比如在時(shí)間選擇器time中start表示一天內(nèi)有效范圍的開始,而end屬性表示一天內(nèi)有效時(shí)間范圍內(nèi)的結(jié)束。舉個(gè)例子,拔牙建議是在早上來(lái)拔,如果寫一個(gè)拔牙的預(yù)約系統(tǒng),則可以用end="12:00"來(lái)限定結(jié)束時(shí)間。
- picker為用戶提供了多個(gè)選擇,用戶選了其中一種,但仍是需要有東西去告訴后臺(tái)用戶選了什么。于是就有了bindchange,代表說當(dāng)用戶選擇了原選擇不同的選擇時(shí),會(huì)觸發(fā)的相應(yīng)的函數(shù)。
- 因?yàn)槲⑿判〕绦蚴褂昧藬?shù)據(jù)綁定的技術(shù),所以一般bindchange會(huì)修改在js文件里面對(duì)應(yīng)的值。
- 數(shù)據(jù)綁定技術(shù)可以簡(jiǎn)單理解成一種從wxml文件獲取到j(luò)s文件中數(shù)據(jù)域中的某個(gè)數(shù)據(jù)的技術(shù),如{{data}}
時(shí)間選擇器time
wxml
<view class="section"> <h2>時(shí)間選擇器</h2> <picker mode="time" value = "{{Time}}" start="9:00" end="12:00" bindchange="bind_ChangeTime"> {{Time}} </picker> </view>
js文件
Page({ data:{ Time:"9:00" }, bind_ChangeTime:function(e){ console.log(e.detail.value) this.setData({ Time:e.detail.value }) } })
wxss
page{ background-color: navy; } .section{ text-align: center; } .section_title{ display:flexbox; font-family:'Times New Roman', Times, serif; color: aliceblue; } .section_picker{ background-color: white; }
參考
補(bǔ)充:遇到的問題
問題說在前面,同一個(gè)頁(yè)面使用多個(gè)普通選擇器遇到了問題,選擇一個(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的問題就解決了,但是現(xiàn)在又發(fā)現(xiàn)了一個(gè)新的問題:
為什么多個(gè)picker會(huì)出現(xiàn)相互影響的問題?比如在第一個(gè)選擇器選擇了3,剩下的選擇器點(diǎn)進(jìn)去默認(rèn)都是從第3個(gè)開始?” 小程序開發(fā)工具中的確存在,看了社區(qū)的帖子,才知道這個(gè)是官方的bug,目前還沒有修復(fù)。
總結(jié)
到此這篇關(guān)于微信小程序選擇器組件picker的文章就介紹到這了,更多相關(guān)小程序選擇器picker內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
stream.js 一個(gè)很小、完全獨(dú)立的Javascript類庫(kù)
stream.js 是一個(gè)很小、完全獨(dú)立的Javascript類庫(kù),它為你提供了一個(gè)新的Javascript數(shù)據(jù)結(jié)構(gòu):streams2011-10-10JavaScript判斷對(duì)象和數(shù)組的兩種方法
這篇文章主要介紹了JavaScript判斷對(duì)象和數(shù)組的兩種方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05javaScript對(duì)文字按照拼音排序?qū)崿F(xiàn)代碼
這篇文章主要介紹了javaScript對(duì)文字按照拼音排序?qū)崿F(xiàn)代碼,有需要的朋友可以參考一下2013-12-12基于javascript實(shí)現(xiàn)簡(jiǎn)單的抽獎(jiǎng)系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了基于javascript實(shí)現(xiàn)簡(jiǎn)單的抽獎(jiǎng)系統(tǒng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-03-03詳解JavaScript的計(jì)時(shí)器和按鈕效果設(shè)置
這篇文章主要為大家介紹了JavaScript的計(jì)時(shí)器和按鈕效果設(shè)置,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2021-12-12JavaScript 通過模式匹配實(shí)現(xiàn)重載
昨天rank同學(xué)向我提出一個(gè)問題,在實(shí)際應(yīng)用中有些接口需要提供類似于函數(shù)重載的功能,以方便開發(fā)者組織代碼邏輯,簡(jiǎn)化使用者調(diào)用。2010-08-08JavaScript SHA-256加密算法詳細(xì)代碼
這篇文章主要為大家詳細(xì)介紹了JavaScript SHA-256加密算法代碼,具有一定的參考價(jià)值,感興趣的朋友可以參考一下2016-10-10