微信小程序自定義可搜索的picker組件示例詳解
更新時間：2022年06月15日 11:41:17 作者：camellia
這篇文章主要介紹了微信小程序自定義可搜索的picker組件,主要包括自定義可搜索的picker組件的代碼以及調(diào)用實例，這里的搜索框使用的是vant微信小程序組件庫，picker使用的微信小程序的原生組件，需要的朋友可以參考下
PC端開發(fā)，組件庫是有可搜索的select可用
但是在手機端微信小程序開發(fā)的時候，使用select就不太合適了，小程序端的選項一般都是是使用picker
但是，問題又來了，微信小程序官方并沒有給我們提供可搜索的Picker
人家沒給，那我們就自定義一個唄
別的到?jīng)]啥，就是感覺交互上有點奇怪
具體效果如下圖所示：
廢話不多說了，上代碼：
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: {
// 在組件定義時的選項中啟用多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é)校后，點擊確定
* @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時，獲取滾動選擇的索引
* @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實例
self.demopicker = self.selectComponent("#demopicker");
},
/**
* @name: 點擊學(xué)校輸入框,展示選擇學(xué)校picker
* @author: camellia
* @date: 20211129
*/
showSchoolPicker()
{
let self = this;
self.demopicker.showDatePicker()
},
/**
* @name: 點擊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)用實例
最后，提示一下，我這里的搜索框使用的是vant微信小程序組件庫，picker使用的微信小程序的原生組件。這個需要注意一下。
到此這篇關(guān)于微信小程序自定義可搜索的picker組件的文章就介紹到這了,更多相關(guān)微信小程序picker組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JS繼承，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
JavaScript對象字面量和構(gòu)造函數(shù)原理與用法詳解
這篇文章主要介紹了JavaScript對象字面量和構(gòu)造函數(shù),結(jié)合實例形式分析了JavaScript對象字面量和構(gòu)造函數(shù)相關(guān)概念、原理、用法及操作注意事項,需要的朋友可以參考下2020-04-04
盤點javascript 正則表達(dá)式中 中括號的【坑】
下面小編就為大家?guī)硪黄P點javascript 正則表達(dá)式中 中括號的【坑】。小編覺得總結(jié)的不錯?，F(xiàn)在分享給大家，希望能給大家一個參考2016-03-03
微信小程序?qū)崿F(xiàn)運動步數(shù)排行功能（可刪除）
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)運動步數(shù)排行功能（可刪除），實現(xiàn)代碼也很簡單,需要的朋友可以參考下2018-07-07
下面小編就為大家?guī)硪黄狫S產(chǎn)生隨機數(shù)的幾個用法詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
Javascript在互聯(lián)網(wǎng)上名聲很臭，但你又很難再找到一個像它這樣如此動態(tài)、如此被廣泛使用、如此根植于我們的生活中的另外一種語言。2011-04-04
基于JS實現(xiàn)二維碼圖片固定在右下角某處并跟隨滾動條滾動
這篇文章主要介紹了基于JS實現(xiàn)二維碼圖片固定在右下角某處并跟隨滾動條滾動,代碼簡單易懂非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
JavaScript實現(xiàn)在數(shù)組中查找不同順序排列的字符串
這篇文章主要介紹了JavaScript實現(xiàn)在數(shù)組中查找不同順序排列的字符串,本文用兩個方法解決了這道算法題,需要的朋友可以參考下2014-09-09
這篇文章介紹了判定是否原生方法的JS代碼，有需要的朋友可以參考一下2013-11-11
用正則獲取指定路徑文件的名稱...2007-02-02