• <menu id="imq0s"><strong id="imq0s"></strong></menu>
  • 福州網站建設>網站新聞>福州微信小程序

    詳解微信小程序picker

    發布日期:2019-10-02瀏覽次數:607 來源:福州網站建設



    這個功能應該算是基礎的了,下面講講它的實現:


    首先,其實是一個名為 picker 的組件:


    picker(微信官方文檔)
    基礎庫 1.0.0 開始支持,低版本需做兼容處理。
    從底部彈起的滾動選擇器。


    然后看看我的代碼:


    這是HTML部分的代碼:


    <view class='Select'>
    <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
        <view class="picker">
          當前選擇:{{multiArray[0][multiIndex[0]]}} {{multiArray[1][multiIndex[1]]}}
        </view>
      </picker>
    </view>
    1
    2
    3
    4
    5
    6
    7
    js代碼:


    Page({
      /**
       * 頁面的初始數據
       */
      data: {
        multiArray: [['2019年', '2018年', '2017年'], ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']],
        multiIndex: [0, 0]
      },
      bindMultiPickerChange: function (e) {
        this.setData({
          multiIndex: e.detail.value
        })
      },
      bindMultiPickerColumnChange: function (e) {
        var data = {
          multiArray: this.data.multiArray,
          multiIndex: this.data.multiIndex
        };
        data.multiIndex[e.detail.column] = e.detail.value;
        this.setData(data);
      },
    })
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    css代碼:


    .Select
    {
      text-align: center;
      margin-top: 15rpx;
      margin-bottom: 15rpx;
    }
    .c_head
    {
      text-align: center;
    }
    /* pages/home/bills/bills.wxss */
    .b_head
    {
      text-align: center;
    }
    .Select
    {
      text-align: center;
      margin-top: 15rpx;
    }
    .f_tou
    {
      display: flex;
      justify-content: space-around;
      padding-top: 40rpx;
      
    }


    .f_tou_in
    {
      height: 150rpx;
      width: 150rpx;
      border-radius: 50%;
    }
    .f_inf
    {
      text-align: center;
      font-size: 33rpx;
    }
    .f_each
    {
      display: flex;
      justify-content: space-between;
      margin-top: 30rpx;
      padding-bottom: 30rpx;
      border-bottom: 1rpx rgba(0, 0, 0, 0.171) solid;
      width: 100%;
    }
    .f_each_left
    {
      margin-left: 40rpx;
    }
    .f_each_right
    {
      margin-right: 10rpx;
      width: 100px;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    首先看到


    multiArray: [['2019年', '2018年', '2017年'], 
    ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']],
    1
    2
    表示兩欄可供選擇,則 multiArray 里面有兩個數組,分別是年份和月份


    當前選擇:{{multiArray[0][multiIndex[0]]}} {{multiArray[1][multiIndex[1]]}}
    1
    這個是HTML中的代碼:
    multiArray[0] [ ] 表示訪問年份數組——[‘2019年’, ‘2018年’, ‘2017年’]
    multiArray[1] [ ] 表示訪問月份數組——[‘1月’, ‘2月’,·····,‘12月’]




    都是用下標訪問,這里具體說明:
    [‘2019年’, ‘2018年’, ‘2017年’]
    multiArray[0] [0] 的數據即表示 2019年
    multiArray[0] [1] 的數據即表示 2018年
    multiArray[0] [2] 的數據即表示 2017年
    月份同理 ~~


    初始值,就是頁面一打開顯示的日期


    HTML中:


    當前選擇:{{multiArray[0][multiIndex[0]]}} {{multiArray[1][multiIndex[1]]}}
    1
    js中:


    multiIndex: [0, 0] (檢索的初始值)
    multiArray: [[‘2019年’, ‘2018年’, ‘2017年’], [‘1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’, ‘7月’, ‘8月’, ‘9月’, ‘10月’, ‘11月’, ‘12月’]]


    multiArray[0][multiIndex[0]] 的意思就是multiArray[0][0],也就是年份數組中的第一個 ‘2019年’
    multiArray[1][multiIndex[1]] 的意思就是multiArray[1][1],也就是月份數組中的第一個 ‘1月’
    所以一開始顯示:
    當前選擇:2019年1月


    接下來具體介紹一下picker
    <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange">
    1
    來看一下這個picker 的屬性設置:
    (1)mode=“multiSelector” 表示這是一個多列選擇器,具體多少列 取決于range 的值,相當于一個提供值的庫
    下面是微信官方文檔:


    使用多項選擇器的時候是依賴于它的 ~~
    這里我們設置


    range="{{multiArray}}">
    multiArray: [['2019年', '2018年', '2017年'], ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']]
    1
    2
    唔。。 除了選擇器的范圍,這里還要設置選擇器的取值“規則”,也就是 value


    然后我們的代碼是:


    value="{{multiIndex}}"
    1
    由于我們的是多項選擇器,rang有兩欄,所以對應的值 value 應該是含有兩個元素的數組,value 主要是用于調用函數的時候返回修改后的值。
    這里說value 的值是number(數字)我個人覺得是不準確的,后面會詳細解釋


    (2)bindchange=“bindMultiPickerChange”


    這個是選擇器的“值” value 如果發生變化(即點擊確認之后)就調用 bindMultiPickerChange 函數


      bindMultiPickerChange: function (e) {
     this.setData({
       multiIndex: e.detail.value
     })
    }
    1
    2
    3
    4
    5
    e.detail.value 獲取了修改后的 value ,再調用 this.setData()就把索引multiIndex 的值給更新了,則HTML中的 “當前選擇” 才算更新 ~~


    下面是對參數的一些說明:
    e 是 event (這個事件對象),是一個類(Object) ——這些信息在調試界面也有


    e.detail 其實也是一個類(Object)


    e.detail.value 是一個數組(Array),帶有兩個元素(其實是數組類,因為你可以看到它還附帶了一些其他的信息)
    因為能夠把value的值賦給 multiIndex 所以它其實也是一個數組類 ~~


    (3)進階功能——日期的實時更新:


    如 Demo 所示:
    在滾動的同時 “當前選擇” 的日期就發生了改變,關于這個實時更新其實是通過bindcolumnchange=“bindMultiPickerColumnChange” 實現的:


    即每每滾動就會調用這個函數


    bindMultiPickerColumnChange: function (e) {
        var data = {
          multiArray: this.data.multiArray,
          multiIndex: this.data.multiIndex
        };
        data.multiIndex[e.detail.column] = e.detail.value;
        this.setData(data);
      }
    1
    2
    3
    4
    5
    6
    7
    8
    函數的原理是構造一個類data 去替換原先 picker 中的data 類
    下面給出各參數的信息:
    首先是this.data.multiArray , 表示picker(this)的data 數據中的 multiArray


    在multiArray 類中又有年份類和月份類:Array(3)和Array(12)——提供可選擇日期


    this.data.multiIndex , 則是進行日期檢索的工具,兩個數字分別負責檢索年份和月份


    把兩個類封裝進新建的data 對象


    接下來是進行信息的實時更新,函數最重要的部分:
    用e.detail.column 獲取改變的列數 (在我的例子中是第0列或第1列),column和value只是一個數字。


    對被修改的那一列的檢索進行更新,用e.detail.column即可取到被修改的那一列


    注意??! 這里的value 不是數組?。?!
    這是機制的問題,之前的value 對應的是multiIndex中兩個元素,必須得是數組
    而這里的value 是在 bindcolumnchange (列改變就調用) 機制下,必定只有一個元素發生改變,沒必要返回一個數組,所以,只返回一個數字即可


    然后是用新建的data 對原this.data 進行覆蓋(this 是可省略的)


    ————————————————
    版權聲明:本文為CSDN博主「嵐月丶」的原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接及本聲明。
    原文鏈接:https://blog.csdn.net/a10201516595/article/details/94319861

    以上是由福州網站建設的小編為你分享了"詳解微信小程序picker"文章,如果你在這方面有什么問題,隨時聯系我們

    福州微信小程序有關的文章
    如果您有什么問題,歡迎咨詢我們客服! 點擊QQ咨詢
    色妞网AV天堂,特级毛片高清特级毛片,免费欧洲毛片A级喷水视频软件
  • <menu id="imq0s"><strong id="imq0s"></strong></menu>