微信小程序選擇器組件picker簡(jiǎn)單入門

更新時(shí)間：2023年03月02日 09:37:37 作者：BeautifulWater

微信小程序picker表單選擇器的使用,根據(jù)官方介紹的有點(diǎn)不清楚,下面這篇文章主要給大家介紹了關(guān)于微信小程序選擇器組件picker的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

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í)際范圍，于是在一些選擇器中，可以用一些屬性來限制用戶的選擇，使其鎖定到實(shí)際范圍內(nèi)。
- 比如在時(shí)間選擇器time中start表示一天內(nèi)有效范圍的開始，而end屬性表示一天內(nèi)有效時(shí)間范圍內(nèi)的結(jié)束。舉個(gè)例子，拔牙建議是在早上來拔，如果寫一個(gè)拔牙的預(yù)約系統(tǒng)，則可以用end="12:00"來限定結(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ù)。