• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录

我的博客我做主

  • 博客园
  • 联系
  • 订阅
  • 管理

公告

View Post

unipp - scroll-view 组件自定义下拉刷新

这里只是部分代码,设计需求是这样的,搜索店铺搜索内容易弹窗的形式展示,支持搜索、下拉刷新、上拉加载更多。

数据为空 和 加载更多 都是自定义组件,比较简单这里就不展示了

 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>

 

作者:kitty20180903suzhou
出处:https://www.cnblogs.com/kitty-blog/
本文版权归作者和博客园共有,欢迎转载,但必须给出原文链接,并保留此段声明,否则保留追究法律责任的权利。

posted on 2020-09-27 16:03  kitty20180903suzhou  阅读(4605)  评论(0)    收藏  举报

刷新页面返回顶部
 
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3