溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

微信小程序picker選擇器怎么實(shí)現(xiàn)

發(fā)布時(shí)間：2022-03-11 10:20:20 來源：億速云 閱讀：239 作者：iii 欄目：開發(fā)技術(shù)

本篇內(nèi)容主要講解“微信小程序picker選擇器怎么實(shí)現(xiàn)”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“微信小程序picker選擇器怎么實(shí)現(xiàn)”吧!

picker選擇器分為三種，普通選擇器，時(shí)間選擇器， 日期選擇器 用mode屬性區(qū)分，默認(rèn)是普通選擇器。

微信小程序picker選擇器怎么實(shí)現(xiàn)


小程序picker選擇器的實(shí)現(xiàn)方式

wxml

<view>普通選擇器</view> <!--mode默認(rèn)selector range數(shù)據(jù)源value選擇的index bindchange事件監(jiān)聽--> <picker mode="selector" range="{{array}}" value="{{index}}" bindchange="listenerPickerSelected"> <text>{{array[index]}}</text> </picker> <view>時(shí)間選擇器</view> <picker mode="time" value="{{time}}" start="06:00" end="24:00" bindchange="listenerTimePickerSelected"> <text>{{time}}</text> </picker>   <view>日期選擇器</view> <picker mode="date" value="{{date}}" start="2016-09-26" end="2017-10-10" bindchange="listenerDatePickerSelected"> <text>{{date}}</text> </picker>

 

js

  1. Page({
  2.  
  3. data:{
  4.  
  5. // text:"這是一個(gè)頁(yè)面"
  6.  
  7. array: ['Android', 'IOS', 'ReactNativ', 'WeChat', 'Web'],
  8.  
  9. index: 0,
  10.  
  11. time: '08:30',
  12.  
  13. date: '2016-09-26'
  14.  
  15. },
  16.  
  17.  
  18.  
  19. /**
  20.  
  21. * 監(jiān)聽普通picker選擇器
  22.  
  23. */
  24.  
  25. listenerPickerSelected: function(e) {
  26.  
  27. //改變index值，通過setData()方法重繪界面
  28.  
  29. this.setData({
  30.  
  31. index: e.detail.value
  32.  
  33. });
  34.  
  35. },
  36.  
  37.  
  38.  
  39. /**
  40.  
  41. * 監(jiān)聽時(shí)間picker選擇器
  42.  
  43. */
  44.  
  45. listenerTimePickerSelected: function(e) {
  46.  
  47. //調(diào)用setData()重新繪制
  48.  
  49. this.setData({
  50.  
  51. time: e.detail.value,
  52.  
  53. });
  54.  
  55. },
  56.  
  57.  
  58.  
  59. /**
  60.  
  61. * 監(jiān)聽日期picker選擇器
  62.  
  63. */
  64.  
  65. listenerDatePickerSelected:function(e) {
  66.  
  67. this.setDate({
  68.  
  69. date: e.detail.value
  70.  
  71. })
  72.  
  73. },
  74.  
  75.  
  76.  
  77. onLoad:function(options){
  78.  
  79. // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來的參數(shù)
  80.  
  81. },
  82.  
  83. onReady:function(){
  84.  
  85. // 頁(yè)面渲染完成
  86.  
  87. },
  88.  
  89. onShow:function(){
  90.  
  91. // 頁(yè)面顯示
  92.  
  93. },
  94.  
  95. onHide:function(){
  96.  
  97. // 頁(yè)面隱藏
  98.  
  99. },
  100.  
  101. onUnload:function(){
  102.  
  103. // 頁(yè)面關(guān)閉
  104.  
  105. }
  106.  
  107. })

到此，相信大家對(duì)“微信小程序picker選擇器怎么實(shí)現(xiàn)”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手