【微信小程序】選擇器組件picker

picker組件的定義

picker組件是一種從底部向上彈起的滾動選擇器。

picker組件的類型

在官方文檔中，有提供五種類型的picker組件，如普通選擇器，多列選擇器，時間選擇器，日期選擇器和省市區(qū)選擇器。

（猜測是，這些選擇器時不同的且常用的某種類型，于是就產(chǎn)生固定的模版）。

而在寫法上是這么寫滴， <picker mode="multiSelector" 其他屬性>

picker屬性

picker組件需要記錄當前選擇，選擇的可允許范圍等等，而這些都是picker的一些相關的屬性。

共同的屬性

• picker為用戶提供了多個選擇，但用戶要從中選中其中一個，value就這樣記載了用戶當前選到的值。（它會初始化選擇器的值）
• picker為用戶提供了多個選擇，但有時為了構(gòu)造選擇器內(nèi)容的方便，picker可能會提供超出服務方所能服務到的實際范圍，于是在一些選擇器中，可以用一些屬性來限制用戶的選擇，使其鎖定到實際范圍內(nèi)。
  • 比如在時間選擇器time中start表示一天內(nèi)有效范圍的開始，而end屬性表示一天內(nèi)有效時間范圍內(nèi)的結(jié)束。舉個例子，拔牙建議是在早上來拔，如果寫一個拔牙的預約系統(tǒng)，則可以用end="12:00"來限定結(jié)束時間。
• picker為用戶提供了多個選擇，用戶選了其中一種，但仍是需要有東西去告訴后臺用戶選了什么。于是就有了bindchange，代表說當用戶選擇了原選擇不同的選擇時，會觸發(fā)的相應的函數(shù)。
  • 因為微信小程序使用了數(shù)據(jù)綁定的技術(shù)，所以一般bindchange會修改在js文件里面對應的值。
  • 數(shù)據(jù)綁定技術(shù)可以簡單理解成一種從wxml文件獲取到js文件中數(shù)據(jù)域中的某個數(shù)據(jù)的技術(shù)，如{{data}}

時間選擇器time

wxml

<view class="section">
    <h2>時間選擇器</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;
}

參考

微信小程序官方文檔文章來源地址http://www.zghlxwxcb.cn/news/detail-801458.html

到了這里，關于【微信小程序】選擇器組件picker的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！