微信小程序如何自定義可搜索的picker組件

本篇內容介紹了“微信小程序如何自定義可搜索的picker組件”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

代碼：

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="請輸入學校名稱關鍵詞"
??????????bind:change="searchSchool"
????????/>
????????<view?bindtap='confirm'>確定</view>
??????</view>
??????<picker-view
????????indicator-class="indicator"
????????value="{{setValues}}"
????????bindchange="bindChange"
????????bindpickend="_bindpickend"
????????indicator-
????????mask-
????????
??????>
?
????????<picker-view-column?class="pickViewColumn">
??????????<view?wx:for="{{items}}"?wx:key="id"?>{{item.name}}</view>
????????</picker-view-column>
??????</picker-view>
????</view>
??</view>
</view>

myPicker.js

Component({
??options:?{
????//?在組件定義時的選項中啟用多slot支持
????multipleSlots:?true
??},
??/**
???*?組件的屬性列表
???*/
??properties:?{
????//?初始化日期
????initValue:?{
??????type:?String,
??????value:?''
????},
????//?父組件傳遞過來的數據列表
????items:?{
??????type:?Array,
??????value:?[]
????}
??},
??/**
???*?組件的初始數據
???*/
??data:?{
????//控制picker的顯示與隱藏
????flag:?true,
????//?用戶輸入的學校關鍵詞
????searchValue:'',
????//?滾動選擇的學校
????setValues:?[],
????//?滾動選擇的學校索引
????selectSchoolIndex:''
??},
??/**
???*?組件的方法列表
???*/
??methods:?{
??/**
??*?@name:?搜索學校
??*?@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:?選擇好學校后，點擊確定
??*?@author:?camellia
??*?@date:?20211129
??*/
??confirm()
??{
????let?self?=?this;
????//?獲取用戶選擇的學校
????let?item?=?self.data.items[self.data.selectSchoolIndex]?self.data.items[self.data.selectSchoolIndex]:self.data.items[0];
????//?通過發送自定義事件把用戶選擇的學校傳遞到父組件
????self.triggerEvent('confirm',?item);
??},
??/**
??*?@name:?用戶滾動picker時，獲取滾動選擇的索引
??*?@author:?camellia
??*?@date:?20211129
??*/
??bindChange(e)
??{
????let?self?=?this;
????self.setData({
??????//?用戶選擇的學校索引
??????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"
??}
}

調用組件：

accountbindTwo.json

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

accountbindTwo.wxml

????????????<!--?填寫學校?-->
????????????<view?class="Info_Item?Item_School">
????????????????<view?class="School?FLOAT_LEFT"?>學校?/University?:?</view>
????????????????<view?class="require?FLOAT_RIGHT">*</view>
????????????????<!--?學校輸入框?-->
????????????????<view?class="FLOAT_RIGHT">
????????????????????<view??class="School_Input"???bindtap="showSchoolPicker">{{school_name}}
????????????????????</view>
????????????????????<!--?學校輸入框右側三角按鈕?-->
????????????????????????<view?class="schoolDrop_icon"?>
????????????????????????????<van-image?width="22rpx"?height="16rpx"?src="/images/expand.png"?></van-image>
????????????????????????</view>
????????????????</view>
????????????</view>

accountbindTwo.js

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

“微信小程序如何自定義可搜索的picker組件”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注蝸牛博客網站，小編將為大家輸出更多高質量的實用文章！

免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：niceseo99@gmail.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。