uniapp下拉刷新

uniapp的下拉刷新有两个方法, 一种是整体的下拉刷新, 使用页面生命周期函数onPullDownRefresh; 另外一种是局部的下拉刷新也叫自定义下拉刷新, 使用scrpll-view组件中的自定义下拉刷新事件.

一.整个页面的刷新(onPullDownRefresh)

在js中定义onPullDownRefresh处理函数(和onLoad等生命周期函数同级), 监听该页面用户下拉刷新事件.

使用步骤

需要在pages.json里, 找到当前页面的pages接点, 并在style选项中开启enablePullDownRefresh.
当处理完数据刷新后, uni.stopPullDownRefresh可以停止当前页面的下拉刷新.
uni.startPullDownRefresh(); 开始下拉刷新, 调用后触发下拉刷新动画, 效果与用户手动下拉刷新一致

"pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app","enablePullDownRefresh": true}}],//index.vueonLoad: function (options) {setTimeout(function () {console.log('start pulldown');}, 1000);//页面加载时就进行一次页面的下拉, 如果不需要可以不写uni.startPullDownRefresh();},onPullDownRefresh() {console.log('refresh');setTimeout(function () {uni.stopPullDownRefresh();}, 1000);}

二.自定义页面刷新(scroll-view)

组件中出现的问题

触发不了下拉
- scroll-view组件外部没有用view包裹. 官网虽然没有说这个问题, 但是如果外部没有一个view单独包裹着这个组件, 就没有办法触发scroll-view组件中的事件
- scroll-view没有设置固定高, 在css中设置height, 设置多高就在多高的区域展现. 比如设置高为50vh(100vh为满屏), 则组件里边的内容只会在半屏内上下滚动,不会触发page的滚动条只会触发scroll-view的滚动条. 如果高度不好给确定值, 可以使用scss(lange=‘scss’)中的calc计算, 例子中有体现.(注意使用calc计算时, -左右一定要有空格)
- 设置高为百分比的话也不能触发下拉. 高可以使用max-hight, 不能使用min-hight
- 没有设置scroll-x
没有滚动到顶部触发下拉, 而是在可视页面中触发下拉

官方默认无论page的滚动条在哪个位置, 只要在scroll-view页面上下拉都会触发下拉函数, 这样用户体验非常差. 可以使用@scroll滚动时触发的函数来获取scroll-view滚动条的位置, 进而来控制refresher-enabled开启和关闭自定义下拉刷新. 当scroll-view的滚动条滚动到顶部时, 使refresher-enabled为true, 其他条件为false.
下拉动画的背景颜色设置/

refresher-background="#f0f0f0"

局部的页面滚动

<view><scroll-view class="scroll" scroll-y="true" :refresher-enabled='refresherEnabled' @refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort" :refresher-triggered="triggered" @scroll='roll' refresher-background="#f0f0f0"><view></view><view></view><view></view><view class="load"> <!--做滚动加载提示使用, more:上拉加载更多 loading:加载中 noMore:没有更多数据--><uni-load-more :status="status"></uni-load-more></view></scroll-view>
</view>

data(){return{status: 'more', size: 10,current: 1,total: 0, //总共有多少条数据dataList:[],refresherEnabled:false, //开启自定义下拉刷新triggered: false //设置当前下拉刷新的状态}
}
onLoad() {this.getData()
},
methods:{getData(){let data = {size: this.size,current: this.current,},uni.request({url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。data:data,header: {'custom-header': 'hello' //自定义请求头信息},success: (res) => {console.log(res.data);this.dataList = res.datathis.total = res.totalif(this.dataList.length = this.total){this.status = 'noMore'}else{this.status = 'more'}}});},//   自定义下拉刷新控件被下拉onPulling(e) {// console.log("onpulling", e);},//自定义下拉刷新被触发onRefresh() {this.status = 'loading'if (this._freshing) return;this._freshing = true;//刷新初始化数据this.current = 1//调用获取数据的函数this.getData()this.triggered = 'restore';setTimeout(() => {this.triggered = false;this._freshing = false;}, 2000)},//自定义下拉刷新被复位onRestore() {this.triggered = 'restore'; // 需要重置console.log("结束")},//自定义下拉刷新被中止onAbort() {console.log("中断")this.triggered = false}// 获取滚动距离roll(res) {if (res.target.scrollTop >= 20) {this.refresherEnabled = false} else {this.refresherEnabled = true}},
}

/* <style lange='scss'> */
.scroll{height: calc(100vh - 190rpx);
}
/* </style> */

uniapp下拉刷新避坑指南相关推荐

uniapp 下拉刷新
uniapp 下拉刷新(全局&单页面) 全局设置在pages.json文件的globalStyle对象中开启enablePullDownRefresh属性单页面在pages.json文件 ...
门店管理系统怎么挑选？请收下这份避坑指南！
有些老板可能会混淆门店运营和门店管理,其实区别很简单-- 运营门店,主要以提升销量.为门店创造利润为目的:而管理门店,侧重点在于辅助销售,让门店一切正常运行. 门店管理包含的工作有很多,比如管理门店日 ...
凌恩生物资讯|细菌完成图，坑多专家少——请收下这份避坑指南
尝试做细菌完成图的你是不是有很多疑问这份避坑指南请收好! 小坑1."1 +X Contig,0 Gap"代表什么? 答:"1 Contig,0 Gap"的承诺 ...
uni-app下拉刷新、上拉加载更多实现
下拉刷新下拉刷新文档在 js 中定义 onPullDownRefresh 处理函数(和onLoad等生命周期函数同级),监听该页面用户下拉刷新事件. 需要在 pages.json 里,找到的当前页 ...
uni-app下拉刷新触底加载更多
首先在pages.json 配置文件中配置 "enablePullDownRefresh": true 需要在哪用加载就配置在路由的style里两个事件 //下拉刷新 o ...
下拉刷新的坑 touchend touchcancel
下拉刷新的实现 /*** 绑定touch事件*/bindTouchEvent(){this.el.addEventListener('touchstart', this._touchStart);th ...
uniapp 下拉刷新、上拉加载更多、最常见的节流场景
首先在pages.josn文件内的pages数组中找到你向加下拉刷新的页面. 找到后添加: {"path": "pages/equipment/equipment&quo ...
WIn10+Anaconda 环境下安装 PyTorch 避坑指南
红色石头的个人网站:redstonewill.com 这些天安装 PyTorch,遇到了一些坑,特此总结一下,以免忘记.分享给大家. 首先,安装环境是:操作系统 Win10,已经预先暗转了 Anaco ...
uniapp 实现下拉刷新功能
1.在需要下拉刷新的页面上进行定义 -- pages.json support : 是否开启窗口下拉功能 style : 下拉刷新的样式 "default" -- 经典下拉刷新样式 ...

uniapp下拉刷新避坑指南

uniapp下拉刷新

一.整个页面的刷新(onPullDownRefresh)

使用步骤

二.自定义页面刷新(scroll-view)

组件中出现的问题

uniapp下拉刷新避坑指南相关推荐

最新文章

热门文章