小程序-uniApp:区域滚动、下拉刷新、上拉加载更多

简介: 小程序-uniApp:区域滚动、下拉刷新、上拉加载更多

一、简介

开发环境:小程序、uniapp

实现功能:列表页面实现,区域滚动、下拉刷新、上拉加载更多,效果如图:

正常:

下拉刷新:

上拉加载:

二、实现

2.1、代码

<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="lower" refresher-enabled="true" @refresherrefresh="refresher" :refresher-triggered="triggered" @refresherrestore="onRestore" @refresherabort="onAbort" v-if = "patList.length > 0">
  <view class="itemList" @click="toDetail(item.caseId,item.identifier)" v-for="(item,index) in patList" :key="index">
    <view class="title">
      <span class="name">翁美玲</span>
      <span class="time">2022-07-15</span>
    </view>
  </view>
  <view class="loading">
    <view class="tips" v-if="loadings === '0'">这是我的底线了~</view>
    <view class="tips" v-else-if="loadings === '1'">上拉加载更多...</view>
    <view class="imgs" v-else-if="loadings === '2'">
      <image src="load.png" mode=""></image>
      <text>加载中...</text>
    </view>
  </view>
</scroll-view>
-------------------------------------------------
lower(){
  console.log('滚动到底部')
  this.page ++
  this.getList()
},
refresher(){
  console.log('下拉刷新',this._freshing,this.triggered)
  if (this._freshing) return;
  this._freshing = true;
  this.triggered = true
  this.page = 1
  this.getList()
    //getList方法执行结束后恢复下边两个状态
  //this.triggered = false;
  //this._freshing = false;
},

2.2、 解析

2.2.1、<scroll-view></scroll-view>,定义需要滚动的区域

2.2.2、:scroll-y,允许纵向滚动

2.2.3、@scrolltolower="lower",事件:滚动到底部/右边时触发,可以调用加载下一页数据了

2.2.4、:refresher-enabled="true",属性:开启自定义下拉刷新

2.2.5、@refresherrefresh="refresher",事件:自定义下拉刷新被触发,可以重新调用接口了

2.2.6、:refresher-triggered="triggered",属性:设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下拉刷新未被触发

2.2.7、@refresherrestore="onRestore",事件:自定义下拉刷新被复位

2.2.8、@refresherabort="onAbort",事件:自定义下拉刷新被中止

三、过程记录

3.1、需要注意的是scroll-view必须设置高度,不设置的话没效果,但不要设置100%,除非父元素写了高度。

四、虽然很简单,但是我觉得每个知识点都应该被记录。欢迎交流指正,关注我,一起学习。

相关文章
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
267 3
|
2月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
52 0
微信小程序更新提醒uniapp
|
2月前
|
移动开发 小程序 数据可视化
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
43 2
|
2月前
|
小程序 数据可视化 API
低代码可视化-uniapp商城首页小程序-代码生成器
低代码可视化-uniapp商城首页小程序-代码生成器
30 0
|
2月前
|
小程序
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
570 0
|
4月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
110 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
2月前
|
存储 移动开发 小程序
uniapp富文本editor输入二次扩展兼容微信小程序
uniapp富文本editor输入二次扩展兼容微信小程序
80 0
|
2月前
|
小程序
uniapp实现微信小程序隐私协议组件封装
uniapp实现微信小程序隐私协议组件封装
49 0
|
3月前
|
JSON 小程序 JavaScript
微信小程序页面事件,下拉刷新事件和上拉触底事件
这篇文章介绍了微信小程序中如何实现下拉刷新和上拉触底事件,包括开启下拉刷新、配置下拉刷新样式、监听下拉刷新事件,以及监听上拉触底事件和配置上拉触底的距离。
|
4月前
|
小程序 前端开发 JavaScript
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
【避坑宝】是一款企业黑红名单吐槽小程序,旨在帮助打工人群体辨别企业优劣。该平台采用SpringBoot+MybatisPlus+uniapp+uview2等技术栈构建,具备丰富的注释与简洁的代码结构,非常适合实战练习与学习。通过小程序搜索“避坑宝”即可体验。
110 0
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序