這里只是部分代碼,設計需求是這樣的,搜索店鋪搜索內容易彈窗的形式展示,支持搜索、下拉刷新、上拉加載更多。
數據為空 和 加載更多 都是自定義組件,比較簡單這里就不展示了
1 <template> 2 <scroll-view v-show="showShops" @scrolltolower="getMoreShops" refresher-enabled="true" :refresher-triggered="triggered" 3 :refresher-threshold="50" refresher-background="white" @refresherpulling="onPulling" 4 @refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort" 5 class="select-list flex flex-direction align-center" scroll-y="true" scroll-with-animation="true" :style="'height:'+selectShopHeight+'px'"> 6 <view class="item padding-tb flex justify-between align-center" v-for="(item,index) in shopList" :key="index" @click="selectShop(item.store_name,item.store_code)"> 7 <view class="shop">{{item.store_name}}</view> 8 <view class="cuIcon-check text-red text-lg check-icon"></view> 9 </view> 10 <view class="bg-white padding-tb" style="margin-top: -30upx; margin-bottom: -30upx;"> 11 <empty-page v-if="isEmpty" :noContent="isLoading?'':'無搜索結果'" :imageHeight="'0px'" :top="'30px'"></empty-page> 12 <load-more :isLoad="isLoading" :isShow="!isEmpty"></load-more> 13 </view> 14 </scroll-view> 15 </template>
1 <script> 2 data(){ 3 return{ 4 //搜索店鋪結果 5 shopList:[], 6 pageNum: 0, 7 pageSize: 20, 8 totalSize: 0, 9 isLoading:true,//加載中 10 // 自定義下拉刷新 11 triggered: false,//下拉刷新是否被觸發 12 _freshing: false // 是否正在刷新 13 } 14 } 15 </script>
1 <script> 2 methods:{ 3 // 自定義下拉刷新控件被下拉 4 async onPulling(e) { 5 this.triggered = true; // 需要重置 6 this.pageNum == 0 7 }, 8 9 // 自定義下拉刷新被觸發 10 async onRefresh() { 11 if (this._freshing) return; 12 this._freshing = true; 13 if (!this.triggered) this.triggered = true; //界面下拉觸發,triggered可能不是true,要設為true 14 const isRefresh = true 15 await this.searchStoreRequest(isRefresh) 16 this.triggered = false; 17 this._freshing = false; 18 }, 19 // 自定義下拉刷新被復位 20 onRestore() { 21 this.triggered = false; // 需要重置 22 }, 23 // 自定義下拉刷新被中止 24 onAbort() { 25 this.triggered = false; 26 }, 27 // 滾動到底部 加載更多 28 async getMoreShops(){ 29 if(this.totalSize == this.shopList.length || this.isLoading){ 30 return 31 } 32 await this.searchStoreRequest() 33 } 34 35 } 36 </script>