您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“微信小程序如何自定義可搜索的picker組件”的有關(guān)知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細閱讀,能夠?qū)W有所成!
代碼:
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- 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: '' }, // 父組件傳遞過來的數(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" 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組件”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實用文章!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。