uniapp下拉刷新避坑指南

2023-07-28 13:25| 来源: 网络整理| 查看: 265

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.vue onLoad: 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"

局部的页面滚动

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.data this.total = res.total if(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 } }, } /* */ .scroll{ height: calc(100vh - 190rpx); } /* */

【本文地址】

公司简介

联系我们