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的属性进行撑开。但是这不是最好的方式,不同端可能会出现一些兼容问题。推荐的一个做法是通过计算的方式计算出一个合理的高度即可。

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

相关推荐
宋辰月21 分钟前
Vue2的进阶Vue3
前端·javascript·vue.js
酷飞飞1 小时前
C语言的复合类型、内存管理、综合案例
java·c语言·前端
姜太小白2 小时前
【前端】CSS Grid布局介绍及示例
前端·css
风继续吹..5 小时前
后台管理系统权限管理:前端实现详解
前端·vue
yuanmenglxb20046 小时前
前端工程化包管理器:从npm基础到nvm多版本管理实战
前端·前端工程化
新手小新6 小时前
C++游戏开发(2)
开发语言·前端·c++
我不吃饼干7 小时前
【TypeScript】三分钟让 Trae、Cursor 用上你自己的 MCP
前端·typescript·trae
小杨同学yx8 小时前
前端三剑客之Css---day3
前端·css
Mintopia9 小时前
🧱 用三维点亮前端宇宙:构建你自己的 Three.js 组件库
前端·javascript·three.js
故事与九10 小时前
vue3使用vue-pdf-embed实现前端PDF在线预览
前端·vue.js·pdf