【微信小程式】微信小程式picker元件

今天我們來盤一下微信小程式當中從頁面底部滑出的滾動選擇器 picker元件

wxml

<view class="clist_header">
        <view class="clist_main">
          <view class='gu_topbo boxSizing'>
            <view class='guinpBoxs'>
              <image class='guinpImg' src='{{domainImg}}zhishiku_sousuo.png'></image>
              <input class='guinputd' confirm-type='search' bindconfirm='keyboardSearch' bindinput="bindInput"  name='inptxt' value="{{searchValue}}" bindfocus="bindFocus" type='text' placeholder='搜尋'></input>
            </view>
            <button class='submitbtn' wx:if="{{searchBtnBleoon}}" form-type="submit">搜尋</button>
            <button class='submitbtn_close' catchtap="closeSearch" wx:else>取消</button>
          </view>
          <view class="clist_navbox boxSizing">
            <view class="clist_navmain">
              <picker mode="selector" header-text="招募狀态" bindchange="bindPickerChangerecru" value="{{recruIndex}}" range-key="text" range="{{recruatatus}}">
                <view class="clist_navitem boxSizing">
                  <view class="pickery">{{recruatatus[recruIndex].text}}</view>
                  <image class="clist_navicon" src="../../images/linchuangshiyan_xiala.png"></image>
                </view>
              </picker>
              <picker mode="selector" header-text="試驗分期" bindchange="bindPickerChangeteststage" value="{{teststageIndex}}" range-key="text" range="{{teststage}}">
                <view class="clist_navitem boxSizing">
                  <view class="pickery">{{teststage[teststageIndex].text}}</view> 
                  <image class="clist_navicon" src="../../images/linchuangshiyan_xiala.png"></image>
                </view>
              </picker>
              <picker mode="multiSelector" header-text="試驗地點" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{regionIndex}}" range="{{regionlist}}">
                <view class="clist_navitem boxSizing">
                  <view class="pickery">
                   {{regionlist[1][regionIndex[1]]}}
                  </view>
                  <image class="clist_navicon" src="../../images/linchuangshiyan_xiala.png"></image>
                </view>
              </picker>
            </view>
          </view>
        </view>
      </view>
           

然後添加點wxss修飾下

wxss

.clist_header{
  width: 100%;
  margin: 0 auto;
  position: fixed;
  top: 0;
  left: 0;  
}
.clist_main{
  width: 100%;
  margin: 0 auto 12rpx;
  background: #ffffff;
  box-shadow: 0 4rpx 12rpx 0 rgba(245,245,245,1);
}
.gu_topbo{
  padding: 12rpx 32rpx 24rpx;
}
.submitbtn{
  text-align: center;
  background: #fff;
  font-size:28rpx;
  font-weight:400;
  color:#53CF98;
  padding: 0;
  margin: 0;
}
.submitbtn_close{
  text-align: center;
  background: #fff;
  font-size:28rpx;
  font-weight:400;
  padding: 0;
  margin: 0;
  color:rgba(157,168,178,1);
}
.submitbtn::after,
.submitbtn_close::after{
  border: none;
  margin: 0;
  padding: 0;
}
.clist_navbox{
  width: 100%;
  margin: 0 auto;
  padding: 0 28rpx;
}
.clist_navmain{
  width: 100%;
  margin: 0 auto;
  display: -webkit-box;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.clist_navmain picker{
  -webkit-box-flex: 1;
  flex: 1;
  width: 100%;
}
.clist_navitem{
  -webkit-box-flex: 1;
  flex: 1;
  width: 100%;
  height: 100rpx;
  padding: 12rpx 15rpx;
  display: -webkit-box;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  font-family:PingFangSC-Regular,PingFang SC;
  font-weight:400;
  color:rgba(31,44,58,1);
  line-height: 40rpx;
  text-align: left;
}
.pickery{
  -webkit-box-flex: 1;
  flex: 1;
  width: 100%;
}
.clist_navicon{
  width: 20rpx;
  height: 12rpx;
  margin-left: 10rpx;
}
           

最後就開始我們的JS邏輯編寫了

js

Page({

  /**
   * 頁面的初始資料
   */
  data: {
    clistNavList: [ //nav資料
      {
        flag: false,
        text: "招募狀态"
      },
      {
        flag: false,
        text: "試驗分期"
      },
      {
        flag: false,
        text: "試驗地點"
      }
    ],
    recruatatus: [ //招募狀态
      {
        flag: false,
        text: "全部狀态"
      },
      {
        flag: false,
        text: "尚未招募"
      },
      {
        flag: false,
        text: "招募中"
      },
      {
        flag: false,
        text: "完成招募"
      },
      {
        flag: false,
        text: "停止招募"
      },
      {
        flag: false,
        text: "撤回招募"
      },
      {
        flag: false,
        text: "暫停"
      },
    ],
    recruIndex: 0, //招募預設顯示
    teststage: [
      {
        flag: false,
        text: "全部分期",
      },
      {
        flag: false,
        text: "Ⅰ期試驗",
      },
      {
        flag: false,
        text: "Ⅱ期試驗",
      },
      {
        flag: false,
        text: "Ⅲ期試驗",
      },
      {
        flag: false,
        text: "Ⅳ期試驗",
      },
    ],
    teststageIndex: 0, //分期預設顯示
    regionlist: [["全部地區","國内","國外"],["全部地區"]],
    domesticList: ["國内地區1","國内地區2","國内地區3","國内地區4","國内地區5","國内地區6","國内地區7"],
    foreignList: ["國外地區1","國外地區2","國外地區3","國外地區4","國外地區5","國外地區6","國外地區7"],
    regionIndex: [0, 0],//國家預設顯示
    regionIndexy: [0,0],
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函數--監聽頁面顯示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函數--監聽頁面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函數--監聽頁面解除安裝
   */
  onUnload: function () {
    
  },

  /**
   * 頁面相關事件處理函數--監聽使用者下拉動作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {
    
  },

  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function () {
    
  },
  //切換狀态
  bindPickerChangerecru: function (e) {
    var that = this;
    that.setData({
      recruIndex: e.detail.value,
    })
  },
  //切換分期
  bindPickerChangeteststage: function (e){
    var that = this;
    that.setData({
      teststageIndex: e.detail.value,
    })
  },
  //切換地區
  bindMultiPickerChange: function (e) {
    var that = this;
    that.setData({
      regionIndexy: e.detail.value,
      regionIndex: e.detail.value,
    })
  },
  bindMultiPickerColumnChange: function (e) {
    console.log("修改資料：",e,'修改的列為', e.detail.column, '，值為', e.detail.value);
    var that = this;
    var data = {
      regionlist: that.data.regionlist,
      regionIndexy: that.data.regionIndexy,
    };
    data.regionIndexy[e.detail.column] = e.detail.value;
    that.setData(data)
    switch (e.detail.column) {
      case 0:
        switch (data.regionIndexy[0]) {
          case 0:
            data.regionlist[1] = ["全部地區"];
            break;
          case 1:
            data.regionlist[1] = that.data.domesticList;
            break;
          case 2:
            data.regionlist[1] = that.data.foreignList;
            break;
        }
        data.regionIndexy[1] = 0;
        break;
    }
    that.setData(data);
  },
})
           

好了 這樣就可以完美的展示滾動選擇器了。

歡迎收藏 微信小程式系列