uni-app中页面的上拉加载与下拉刷新

前端同学在日常搬砖中肯定会写一些下拉刷新上拉加载数据的列表,实现的方式也很多。今天我就从一个前端小白的角度去梳理一下这些上拉下拉的具体实现方式


下拉刷新

这个是非常简单的,在pages.json文件中,将想要开启下拉刷新页面中的 enablePullDownRefresh 选项改成true

json 复制代码
{
            "path" : "pages/mine/junior",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "绑定用户",
                "navigationStyle": "custom",
                "enablePullDownRefresh": true
            }
            
        }

然后在页面中定义下拉的回调要处理方法 onPullDownRefresh,然后在其中编写具体逻辑即可。

scss 复制代码
    onPullDownRefresh() {
            //  this.fetchData()     todo
            setTimeout(()=>{
                    uni.stopPullDownRefresh()
            },500)
    },

下拉还是非常简单的。

上拉加载数据方式一 通过页面的回调事件onReachBottom实现

当页面中内容超过可视区域出现滚动条时候,在页面中定义 onReachBottom 事件回调,此时当页面滚动到底部的时候就会触发事件。

javascript 复制代码
    onReachBottom() {
            console.log('到底了')
    },

这样就可以在回调中处理一些加载更多数据的逻辑了。

上面这种方式叫做页面滚动,就是说整个页面都会向上滚动,当触底了以后就可以拉取更多数据。这种方式实现起来简单,但是并不是适合于所有的下拉场景。比如说首页中顶部轮播需要固定住,只有下面一小块区域可以实现滚动,这就是区域滚动

上拉加载数据方式二 通过组件实现区域滚动。

这个组件可能我们就很熟悉了,因为uni-app还不是很普遍,用微信小程序原生开发的时候,做滚动就会去用这个组件。这个组件需要在初始化时候给予一个固定的高度值,这样当里面的内容超出这个高度值的时候,就能触发组件的下拉事件 @scrolltolower但是这个高度值如何去设定也是一个问题,因为不同的手机的屏幕高度是不同的,怎么样去兼容所有的手机会是一个问题。早期我的实现方式一直是通过flex布局。顶部容器给与个固定高度,然后滚动区域给与一个 flex:1的属性进行撑开。但是这不是最好的方式,不同端可能会出现一些兼容问题。推荐的一个做法是通过计算的方式计算出一个合理的高度即可。

篇幅有限,这里只讲解了实现思路,并没给出示例代码,后续补充完善

相关推荐
爱分享的程序员27 分钟前
全栈项目搭建指南:Nuxt.js + Node.js + MongoDB
前端
隐含1 小时前
webpack打包,把png,jpg等文件按照在src目录结构下的存储方式打包出来。解决同一命名的图片资源在打包之后,重复命名的图片就剩下一个图片了。
前端·webpack·node.js
lightYouUp1 小时前
windows系统中下载好node无法使用npm
前端·npm·node.js
Dontla1 小时前
npm cross-env工具包介绍(跨平台环境变量设置工具)
前端·npm·node.js
小妖6661 小时前
vue2 切换主题色以及单页面好使方法
前端·vue.js·elementui
胡桃夹夹子2 小时前
【前端优化】vue2 webpack4项目升级webpack5,大大提升运行速度
前端·javascript·vue.js·webpack·性能优化
Stringzhua2 小时前
JavaScript【7】BOM模型
开发语言·前端·javascript
阿幸软件杂货间2 小时前
谷歌浏览器(Google Chrome)136.0.7103.93便携增强版|Win中文|安装教程
前端·chrome
繁依Fanyi2 小时前
Animaster:一次由 CodeBuddy 主导的 CSS 动画编辑器诞生记
android·前端·css·编辑器·codebuddy首席试玩官
想起你的日子3 小时前
Android studio 实现弹出表单编辑界面
java·前端·android studio