快捷導(dǎo)航

微信小程序自定義可搜索的picker組件示例詳解

更新時(shí)間：2022年06月15日 11:41:17 作者：camellia

這篇文章主要介紹了微信小程序自定義可搜索的picker組件,主要包括自定義可搜索的picker組件的代碼以及調(diào)用實(shí)例，這里的搜索框使用的是vant微信小程序組件庫，picker使用的微信小程序的原生組件，需要的朋友可以參考下

PC端開發(fā)，組件庫是有可搜索的select可用

但是在手機(jī)端微信小程序開發(fā)的時(shí)候，使用select就不太合適了，小程序端的選項(xiàng)一般都是是使用picker

但是，問題又來了，微信小程序官方并沒有給我們提供可搜索的Picker

人家沒給，那我們就自定義一個唄

別的到?jīng)]啥，就是感覺交互上有點(diǎn)奇怪

具體效果如下圖所示：

廢話不多說了，上代碼：

myPicker.wxml

<view class="date-background" hidden="{{flag}}">
  <view class='date-gray-background' bindtap='hiddeDatePicker'></view>
  <view class='date-container'>
    <view class="transparent">
      <view class='date-confirm'>
        <view bindtap='hiddeDatePicker'>取消</view>
        <van-search
          value="{{searchValue}}"
          input-align="center"
          placeholder="請輸入學(xué)校名稱關(guān)鍵詞"
          bind:change="searchSchool"
        />
        <view bindtap='confirm'>確定</view>
      </view>
      <picker-view
        indicator-class="indicator"
        value="{{setValues}}"
        bindchange="bindChange"
        bindpickend="_bindpickend"
        indicator-style="height: 100rpx;"
        mask-style="height:900rpx;"
        style="width: 100%; height: 90%;position:absolute;bottom:0rpx;text-align:center;background:white"
      >
 
        <picker-view-column class="pickViewColumn">
          <view wx:for="{{items}}" wx:key="id" style="line-height: 104rpx">{{item.name}}</view>
        </picker-view-column>
      </picker-view>
    </view>
  </view>
</view>

myPicker.js

Component({
  options: {
    // 在組件定義時(shí)的選項(xiàng)中啟用多slot支持
    multipleSlots: true
  },
  /**
   * 組件的屬性列表
   */
  properties: {
    // 初始化日期
    initValue: {
      type: String,
      value: ''
    },
    // 父組件傳遞過來的數(shù)據(jù)列表
    items: {
      type: Array,
      value: []
    }
  },
  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {
    //控制picker的顯示與隱藏
    flag: true,
    // 用戶輸入的學(xué)校關(guān)鍵詞
    searchValue:'',
    // 滾動選擇的學(xué)校
    setValues: [],
    // 滾動選擇的學(xué)校索引
    selectSchoolIndex:''
  },
  /**
   * 組件的方法列表
   */
  methods: {
  /**
  * @name: 搜索學(xué)校
  * @author: camellia
  * @date: 20211129
  */
  searchSchool(e)
  {
    let self = this;
    self.triggerEvent('searchSchool', e.detail);
  },
  /**
  * @name: 隱藏picker
  * @author: camellia
  * @date: 20211129
  */
  hiddeDatePicker()
  {
    let self = this;
    self.setData({
      flag: !self.data.flag
    })
  },
  /**
  * @name: 展示picker
  * @author: camellia
  * @date: 20211129
  */
  showDatePicker()
  {
    let self = this;
    self.setData({
      flag: !self.data.flag
    })
    self.getItems()
  },
  /**
  * @name: 選擇好學(xué)校后，點(diǎn)擊確定
  * @author: camellia
  * @date: 20211129
  */
  confirm()
  {
    let self = this;
    // 獲取用戶選擇的學(xué)校
    let item = self.data.items[self.data.selectSchoolIndex]?self.data.items[self.data.selectSchoolIndex]:self.data.items[0];
    // 通過發(fā)送自定義事件把用戶選擇的學(xué)校傳遞到父組件
    self.triggerEvent('confirm', item);
  },
  /**
  * @name: 用戶滾動picker時(shí)，獲取滾動選擇的索引
  * @author: camellia
  * @date: 20211129
  */
  bindChange(e)
  {
    let self = this;
    self.setData({
      // 用戶選擇的學(xué)校索引
      selectSchoolIndex:e.detail.value[0]
    })
  },
  /**
   * @name: 獲取初始化信息
   * @author: camellia
   * @date: 20211130
   */
  getItems(e)
  {
    let self = this;
    if (self.data.items.length && self.data.initValue) {
      let items = self.data.items
      for (let i = 0; i < items.length; i++) {
        if (self.data.initValue == items[i].id) {
          self.setData({
            setValues: [i]
          })
          return
        }
      }
    }
    self.setData({
      setValues: [0]
    })
  },
},
})

myPicker.wxss

.date-background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.date-gray-background {
    position: absolute;
    width: 100%;
    top: 0;
    background: rgba(0, 0, 0, .5);
    height: calc(100% - 500rpx);
}
.date-container {
    position: absolute;
    width: 100%;
    height: 900rpx;
    overflow: hidden;
    background: #fff;
    bottom:0;
    z-index: 1000;
}
 
.date-confirm {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:0 20rpx;
    font-size:34rpx;
    line-height: 70rpx;
    color:var(--ThemeColor)
}
.pickViewColumn{
    height: 900rpx;
    margin-top: -300rpx;
}
.indicator{
  height: 80rpx;
  border: 1rpx solid #E5E8E8;
  }

myPicker.json

{
  "component": true,
  "usingComponents": {
      "van-search": "@vant/weapp/search/index"
  }
}

調(diào)用組件：

accountbindTwo.json

{
  "usingComponents": {
    "myPicker":"/components/myPicker/myPicker"
  }
}

accountbindTwo.wxml

            <!-- 填寫學(xué)校 -->
            <view class="Info_Item Item_School">
                <view class="School FLOAT_LEFT" >學(xué)校 /University : </view>
                <view class="require FLOAT_RIGHT">*</view>
                <!-- 學(xué)校輸入框 -->
                <view class="FLOAT_RIGHT">
                    <view  class="School_Input"  style="{{school_id?'':'color:#808080'}};{{schoolValidate?'border:1rpx solid #BD3731':''}}" bindtap="showSchoolPicker">{{school_name}}
                    </view>
                    <!-- 學(xué)校輸入框右側(cè)三角按鈕 -->
                        <view class="schoolDrop_icon" >
                            <van-image width="22rpx" height="16rpx" src="/images/expand.png" ></van-image>
                        </view>
                </view>
            </view>

accountbindTwo.js

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
    let self = this;
    // 獲取自定義學(xué)校picker實(shí)例
    self.demopicker = self.selectComponent("#demopicker");
  },
/**
   * @name: 點(diǎn)擊學(xué)校輸入框,展示選擇學(xué)校picker
   * @author: camellia
   * @date: 20211129
   */
  showSchoolPicker()
  {
    let self = this;
    self.demopicker.showDatePicker()
  },
  /**
   * @name: 點(diǎn)擊picker確定按鈕,隱藏選擇學(xué)校picker
   * @author: camellia
   * @param:e:自定義組件傳遞的參數(shù)，該參數(shù)里保存了用戶選擇的學(xué)校id和name
   * @date: 20211129
   */
  confirmSchool(e){
    let self = this;
    // 隱藏自定義picker
    self.demopicker.hiddeDatePicker();
  },

以上就是自定義可搜索的picker組件的代碼以及調(diào)用實(shí)例

最后，提示一下，我這里的搜索框使用的是vant微信小程序組件庫，picker使用的微信小程序的原生組件。這個需要注意一下。

到此這篇關(guān)于微信小程序自定義可搜索的picker組件的文章就介紹到這了,更多相關(guān)微信小程序picker組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: