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

一、简介

开发环境：小程序、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 = truethis.page = 1this.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"，事件：自定义下拉刷新被中止

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

四、参考文档：

scroll-view | 微信开放文档

小程序：区域滚动、下拉刷新、上拉加载更多相关推荐

uni-app下拉刷新触底加载更多
首先在pages.json 配置文件中配置 "enablePullDownRefresh": true 需要在哪用加载就配置在路由的style里两个事件 //下拉刷新 o ...
recyclerview的数据刷新（下拉刷新和自动加载更多）以及添加提示语（例如：“数据已加载完毕”）
下拉加载更多的核心是SwipeRefreshLayout搭配Recyclerview进行使用.布局为 <android.support.v4.widget.SwipeRefreshLayout ...
小程序列表页分页获取数据，下滑加载更多
页面代码 <view class="fp_box">  <view class="load_style" hi ...
微信小程序特殊布局下，页面上拉触底事件onReachBottom无法触发解决方法
一.js import fn from '../../utils/functions.js'; // 你自己封装的方法集 Page({data: {list: [],page: 1,loading: ...
Android 自定义 ListView 上下拉动“刷新最新”和“加载更多”歌曲列表
本文内容环境测试数据项目结构演示参考资料本文演示,上拉刷新最新的歌曲列表,和下拉加载更多的歌曲列表.所谓"刷新最新"和"加载更多"是指日期.演示代码 ...
微信小程序下拉刷新/上拉加载组件
简介一款基于官方组件scroll-view进行封装的支持上拉加载下拉刷新的微信小程序组件,需要基础库2.10.1及以上, 项目地址:github 预览功能下拉刷新上拉加载支持自定义下拉样式 ...
小程序下拉刷新上拉加载等多
小程序下拉刷新上拉加载下拉刷新在当前页面的json文件中开启上拉刷新 async getGoodsList(){ //定义参数信息var n=this.data.infoconst res=aw ...
微信小程序下拉刷新真机没效果_微信小程序下拉刷新上拉加载(示例代码)
1.下拉刷新小程序页面集成了下拉功能,并提供了接口,我们只需要一些配置就可以拿到事件的回调. 1. 需要在 .json 文件中配置. 如果配置在app.json文件中,那么整个程序都可以下拉刷新.如 ...
小程序在父组件执行子组件方法，可适用于下拉刷新上拉加载之后执行子组件方法
当父组件引用了子组件的时候,会遇到父组件执行子组件的方法,比如下拉刷新上拉加载等事件只有在页面中才能检测到,但是获取数据的方法在子组件,这时就可以执行子组件方法. 思路很简单,类似于vue中给子组件加 ...
小程序在父组件执行子组件方法，可适用于下拉刷新上拉加载之后执行子组件方法...
当父组件引用了子组件的时候,会遇到父组件执行子组件的方法,比如下拉刷新上拉加载等事件只有在页面中才能检测到,但是获取数据的方法在子组件,这时就可以执行子组件方法. 思路很简单,类似于vue中给子组件加 ...

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

小程序：区域滚动、下拉刷新、上拉加载更多相关推荐

最新文章

热门文章