uniapp:上拉加载更多、下拉刷新、页面滚动到指定位置

news2024/11/8 2:00:43

提醒
本文实例是使用uniapp进行开发演示的。

一、需求场景

在开发商品(SKU)列表页面时,通常有三个需求:

  1. 页面下拉刷新,第一页展示最新数据;
  2. 上拉加载更多数据;
  3. 列表页面可以滚动到指定位置,例如:回到顶部、回到上次浏览位置

二、需求分析

  1. 接口支持分页加载
  2. 页面下拉刷新
    首先在pages.json页面路由里将enablePullDownRefresh参数值设为true,表示此页面开启下拉刷新;刷新成功后,页面数据更新并回到顶部;
  3. 页面向上滑动时,检测是否有更多数据,加载到新的数据直接显示在当前页面列表数据下方,否则提示用户没有更多数据了;
  4. 记录当前页面滚动的位置;当触发滚动到指定位置方法时将记录页面上次滚动的位置数值参入即可。

三、技术方案

  1. uni-app页面生命周期onPullDownRefresh函数,监听用户下拉动作,一般用于下拉刷新;
  2. uni-app页面生命周期onReachBottom函数,页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据。具体见下方注意事项
  3. uni-app页面生命周期onPageScroll函数,监听页面滚动,参数为Object;通过obj.scrollTop获取滚动距离;
  4. uni.pageScrollTo()方法实现页面滚动到指定位置

四、技术知识点简介

4.1 下拉刷新(onPullDownRefresh)

小程序开启下拉刷新,在配置页面(pages.json)的 enablePullDownRefresh 属性为 true。
js代码示例

{
    "pages": [
       {
					"path": "pages/list/testPulldownRefreshReachBottom",
					"style": {
						"navigationBarTitleText": "产品列表",
						"enablePullDownRefresh": true,
						"app-plus": {
							"bounce": "vertical"
						}
					}
				}
   ]
}

在 App 平台下可以自定义部分下拉刷新的配置 page->style->app-plus->pullToRefresh。
js代码示例

{
    "pages": [
        {
            "path": "pages/index/index", //首页
            "style": {
                "app-plus": {
                    "pullToRefresh": {
                        "support": true,
                        "color": "#ff3333",
                        "style": "default",
                        "contentdown": {
                            "caption": "下拉可刷新自定义文本"
                        },
                        "contentover": {
                            "caption": "释放可刷新自定义文本"
                        },
                        "contentrefresh": {
                            "caption": "正在刷新自定义文本"
                        }
                    }
                }
            }
        }
    ]
}

下拉刷新使用注意

  • enablePullDownRefresh 与 pullToRefresh->support 同时设置时,后者优先级较高。
  • 如果期望在 App 和小程序上均开启下拉刷新的话,请配置页面的 enablePullDownRefresh 属性为 true。
  • 若仅期望在 App 上开启下拉刷新,则不要配置页面的 enablePullDownRefresh 属性,而是配置 pullToRefresh->support 为 true。
  • 开启原生下拉刷新时,页面里不应该使用全屏高的scroll-view,向下拖动内容时,会优先触发下拉刷新而不是scroll-view滚动
  • 原生下拉刷新的起始位置在原生导航栏的下方,如果取消原生导航栏,使用自定义导航栏,原生下拉刷新的位置会在屏幕顶部。如果希望在自定义导航栏下方拉动,只能使用circle方式的下拉刷新,并设置offset参数,将circle圈的起始位置调整到自定义导航栏下方。hello uni-app的扩展组件中有示例。
  • 如果想在app端实现更多复杂的下拉刷新,比如美团、京东App那种拉下一个特殊图形,可以使用nvue的组件。HBuilderX 2.0.3+起,新建项目选择新闻模板可以体验
  • 如果想在vue页面通过web前端技术实现下拉刷新,插件市场有例子,但前端下拉刷新的性能不如原生,复杂长列表会很卡
  • iOS上,default模式的下拉刷新和bounce回弹是绑定的,如果设置了bounce:none,会导致无法使用default下拉刷新
4.2 页面滚动到底部的事件(onReachBottom)

可在pages.json里定义具体页面底部的触发距离onReachBottomDistance,

比如设为50,那么滚动页面到距离底部50px时,就会触发onReachBottom事件。

如使用scroll-view导致页面没有滚动,则触底事件不会被触发。scroll-view滚动到底部的事件请参考scroll-view的文档。

onReachBottomDistance 参数说明
onReachBottomDistance:Number类型,默认值 50,页面上拉触底事件触发时距页面底部距离,单位只支持px。

4.3 监听页面滚动(onPageScroll)

参数说明
scrollTop:Number类型,页面在垂直方向已滚动的距离(单位px)
js代码示例

onPageScroll : function(e) { //nvue暂不支持滚动监听,可用bindingx代替
	console.log("滚动距离为:" + e.scrollTop);
},

监听页面滚动注意

  • onPageScroll里不要写交互复杂的js,比如频繁修改页面。因为这个生命周期是在渲染层触发的,在非h5端,js是在逻辑层执行的,两层之间通信是有损耗的。如果在滚动过程中,频发触发两层之间的数据交换,可能会造成卡顿。(uvue在app端无此限制)
  • 在webview渲染时,比如app-vue、微信小程序、H5中,也可以使用wxs监听滚动,参考;在app-nvue中,可以使用bindingx监听滚动,参考。
  • 如果想实现滚动时标题栏透明渐变,在App和H5下,可在pages.json中配置titleNView下的type为transparent,参考。(uni-app x不支持)
  • 如果需要滚动吸顶固定某些元素,推荐使用css的粘性布局,参考插件市场。插件市场也有其他js实现的吸顶插件,但性能不佳,需要时可自行搜索。(uni-app x可自由在uts中设置固定位置)
4.4 uni.pageScrollTo(OBJECT)

将页面滚动到目标位置。可以指定滚动到具体的scrollTop数值,也可以指定滚动到某个元素的位置

OBJECT参数说明
在这里插入图片描述

五、实例效果图

1.第一页数据
在这里插入图片描述

2.上拉加载更多数据
在这里插入图片描述

3.下拉刷新
在这里插入图片描述

4.页面滑动超过一页显示 回到顶部按钮
在这里插入图片描述

5.上拉加载更多数据后,已经全部加载完了
在这里插入图片描述

6.点击回到顶部按钮后的页面和第一页显示的数据一样

六、实例代码

testPulldownRefreshReachBottom.vue文件代码

<template>
    <view class="content-root">
        <view class="content-wrap">
            <view v-if="productList && productList.length > 0">
                <view class="list-item" v-for="(item, index) in productList" :key="index">
                    <text class="itme-name">{{ item.name }}</text>
                    <text class="itme-desc">{{ item.desc }}</text>
                </view>
            </view>
            <view class="no-data" v-else>暂无数据</view>
            <view class="no-more-data" v-if="noMoreData">
                <text>没有更多数据了</text>
            </view>
        </view>
        <view class="go-top" v-if="showGoToTop" @click="goToTop">
            <text>回到</text>
            <text>顶部</text>
        </view>
    </view>

</template>
<script>
export default {
    data() {
        return {
            productType: 1,
            currentPage: 1,
            lastPage: 1,
            lastPostion: 0,
            pageSize: 30,
            total: 0,
            noMoreData: false,
            productList: [],
            showGoToTop: false
        }
    },

    onLoad(option) {
        this.productType = option.productType
        this.getProductList(true)
    },

    onPageScroll(e) {
        this.lastPostion = e.scrollTop
        console.log(`当前滚动位置 this.lastPostion = ${this.lastPostion} , this.showGoToTop = ${this.showGoToTop}`)
        if (this.lastPostion > 300) {
            this.showGoToTop = true
        } else if (this.showGoToTop) {
            this.showGoToTop = false
        }
    },

    onPullDownRefresh() {
        this.lastPage = this.currentPage
        this.currentPage = 1
        this.getProductList(true)
        setTimeout(() => {
            uni.stopPullDownRefresh()
        }, 600);
    },

    onReachBottom() {
        if (this.noMoreData) {
            return
        }
        this.lastPage = this.currentPage
        this.currentPage++
        this.getProductList(false)
    },

    methods: {
        //回到顶部
        goToTop() {
            uni.pageScrollTo({
                scrollTop: 0,
                duration: 0,
            })
        },

        //获取商品列表
        async getProductList(refresh) {
            //let result =  await getProductList() // 网络请求

            setTimeout(() => {// 模拟网络请求
                if (refresh) {
                    this.iniLocalData()
                    return
                }

                this.loadMoreData()

            }, 500);
        },

        iniLocalData() {
            this.noMoreData = false
            this.productList = [
                {
                    productId: "1234567890",
                    name: "西蓝花",
                    desc: "有机蔬菜,安全健康",
                    skuType: [
                        {
                            id: "1",
                            price: "9.99",
                            txt: ""
                        }
                    ]
                },
                {
                    productId: "3234567890",
                    name: "西红柿",
                    desc: "有机蔬菜,安全健康;",
                    skuType: [
                        {
                            id: "1",
                            price: "9.00",
                            txt: ""
                        }
                    ]
                },
                {
                    productId: "4234567890",
                    name: "洋葱",
                    desc: "洋葱可生吃,安全健康;",
                    skuType: [
                        {
                            id: "1",
                            price: "5.00",
                            txt: ""
                        }
                    ]
                },
                {
                    productId: "1734567890",
                    name: "小青菜",
                    desc: "有机蔬菜,安全健康;",
                    skuType: [
                        {
                            id: "1",
                            price: "3.00",
                            txt: ""
                        }
                    ]
                },
                {
                    productId: "1234467890",
                    name: "上海青",
                    desc: "蔬菜,安全健康;",
                    skuType: [
                        {
                            id: "1",
                            price: "3.00",
                            txt: ""
                        }
                    ]
                },
                {
                    productId: "1234567390",
                    name: "上海青",
                    desc: "蔬菜,安全健康;",
                    skuType: [
                        {
                            id: "1",
                            price: "3.00",
                            txt: ""
                        }
                    ]
                },
                {
                    productId: "1239567390",
                    name: "娃娃菜",
                    desc: "蔬菜,安全健康;",
                    skuType: [
                        {
                            id: "1",
                            price: "8.00",
                            txt: ""
                        }
                    ]
                },
                {
                    productId: "1239567390",
                    name: "胡萝卜",
                    desc: "有机蔬菜,安全健康;",
                    skuType: [
                        {
                            id: "1",
                            price: "5.00",
                            txt: ""
                        }
                    ]
                },
                {
                    productId: "1239567390",
                    name: "西葫芦",
                    desc: "蔬菜,安全健康;",
                    skuType: [
                        {
                            id: "1",
                            price: "8.00",
                            txt: ""
                        }
                    ]
                },
                {
                    productId: "1239567390",
                    name: "紫甘蓝",
                    desc: "蔬菜,安全健康;",
                    skuType: [
                        {
                            id: "1",
                            price: "5.00",
                            txt: ""
                        }
                    ]
                },
                {
                    productId: "1239567390",
                    name: "大白菜",
                    desc: "蔬菜,安全健康;",
                    skuType: [
                        {
                            id: "1",
                            price: "3.00",
                            txt: ""
                        }
                    ]
                }
            ]
        },

        loadMoreData() {
            if (this.noMoreData) {
                return
            }
            let result = [
                {
                    productId: "2239567390",
                    name: "牛腱",
                    desc: "新鲜牛肉;",
                    skuType: [
                        {
                            id: "1",
                            price: "109.00",
                            txt: ""
                        }
                    ]
                },
                {
                    productId: "2239567391",
                    name: "牛腿肉",
                    desc: "新鲜牛肉;",
                    skuType: [
                        {
                            id: "1",
                            price: "99.00",
                            txt: ""
                        }
                    ]
                },
                {
                    productId: "2239567392",
                    name: "牛腩",
                    desc: "新鲜牛肉;",
                    skuType: [
                        {
                            id: "1",
                            price: "89.00",
                            txt: ""
                        }
                    ]
                },
                {
                    productId: "2339567390",
                    name: "排骨",
                    desc: "新鲜猪肉;",
                    skuType: [
                        {
                            id: "1",
                            price: "29.00",
                            txt: ""
                        }
                    ]
                },
                {
                    productId: "2339567391",
                    name: "后退肉",
                    desc: "新鲜猪肉;",
                    skuType: [
                        {
                            id: "1",
                            price: "18.00",
                            txt: ""
                        }
                    ]
                },
                {
                    productId: "2339567390",
                    name: "五花肉",
                    desc: "新鲜猪肉;",
                    skuType: [
                        {
                            id: "1",
                            price: "24.00",
                            txt: ""
                        }
                    ]
                }
            ]

            this.productList = [...this.productList, ...result]
            this.noMoreData = true // 这个逻辑在实际项目开发中以接口返回的总数量为准
        }
    }

}
</script>

<style scoped>
.content-root {
    height: 100%;
    background-color: #f5f5f5;
    padding: 32rpx;
}

.content-wrap {
    background-color: #f5f5f5;
    padding-bottom: 80rpx;
}

.list-item {
    display: flex;
    padding: 16rpx 20rpx;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 16rpx;
    color: #000;
    margin-bottom: 32rpx;
}

.itme-name {
    font-size: 32rpx;
}

.itme-desc {
    font-size: 24rpx;
}

.no-data {
    height: 100%;
    text-align: center;
    margin-top: 400rpx;
    color: #000;
    font-size: 28rpx;
}

.no-more-data {
    width: 100%;
    height: 50rpx;
    color: #000;
    align-items: center;
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    text-align: center;
}

.go-top {
    z-index: 99;
    position: fixed;
    display: flex;
    flex-flow: column;
    right: 0;
    bottom: 0;
    margin-right: 32rpx;
    margin-bottom: 200rpx;
    width: 80rpx;
    height: 80rpx;
    align-items: center;
    background-color: #eeeeee;
    border-radius: 50%;
    font-size: 20rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    text-align: center;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2228377.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

5G在汽车零部件行业的应用

5G技术在汽车零部件行业的应用正在不断深入&#xff0c;为行业的智能化、自动化和高效化转型提供了强大的技术支持。 1、5G技术特点与优势 5G技术具有高速度、低延迟、大连接和切片技术等特点与优势。这些特性为汽车零部件行业提供了稳定、可靠、高效的通信连接&#xff0c;使…

jmeter的基本使用

Jmeter基本使用 一、变量 1.用户定义变量 2.用户参数 二、函数 1.计数器${__counter(,)} 2.时间函数 3.加密函数${__digest(,,,,)} 4. 整数相加${__intSum(,,)} 5.属性函数&#xff0c;${__P(,)}、${__property(,,)}、${__setProperty(,,)} 6.V函数 三、获取响应数据…

算法的学习笔记—和为 S 的连续正数序列(牛客JZ74)

&#x1f600;前言 在牛客网的《剑指 Offer》系列题中&#xff0c;有一道关于输出和为给定值 S 的连续正数序列的问题。这是一道典型的双指针问题&#xff0c;考察我们对连续数列求和的理解和双指针的应用。本文将详细解析这道题的思路&#xff0c;并展示如何实现代码。 &#…

D53【python 接口自动化学习】- python基础之模块与标准库

day53 自定义模块 学习日期&#xff1a;20241030 学习目标&#xff1a;模块与标准库 -- 67 自定义模块&#xff1a;如何编写一个完整功能&#xff1f; 学习笔记&#xff1a; 创建自定义模块 自定义模块注意事项 自定义模块 def func1():return this is a functionclass Cl…

上市公司企业数字金融认知数据集(2001-2023年)

一、测算方式&#xff1a;参考C刊《经济学家》王诗卉&#xff08;2021&#xff09;老师的做法&#xff0c;数字金融认知使用每万字年报描述中包含的对数字金融相关关键词的提及次数&#xff0c;关键词为&#xff1a;互联网、数字化、智能、大数据、电子银行、金融科技、科技金融…

4.2-7 运行MR应用:词频统计

文章目录 1. 准备数据文件2. 文件上传到HDFS指定目录2.1 创建HDFS目录2.2 上传文件到HDFS2.3 查看上传的文件 3. 运行词频统计程序的jar包3.1 查看Hadoop自带示例jar包3.2 运行示例jar包里的词频统计 4. 查看词频统计结果5. 在HDFS集群UI界面查看结果文件6. 在YARN集群UI界面查…

How to Train Neural Networks for Flare Removal

Abstract 当相机指向强光源时&#xff0c;生成的照片可能包含镜头眩光伪影。 耀斑以多种形式出现&#xff08;光晕、条纹、渗色、雾霾等&#xff09;&#xff0c;这种外观的多样性使得去除耀斑变得具有挑战性。 现有的分析解决方案对伪影的几何形状或亮度做出了强有力的假设&a…

Kafka如何控制消费的位置?

大家好&#xff0c;我是锋哥。今天分享关于【Kafka如何控制消费的位置?】面试题&#xff1f;希望对大家有帮助&#xff1b; Kafka如何控制消费的位置? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 在 Kafka 中&#xff0c;控制消费位置主要通过以下几个机制来实…

shell脚本实例(4)while实现1+...+100,linux新增用户

while实现1到100求和 #!/bin/bash/ s0 i1 #-le小于等于 while [ $i -le 100 ] dos$[ $s$i ]i$[ $i1 ] done echo $s echo $i 执行结果如下 修改用户名密码脚本 #!/bin/bash/ #提示用户输入用户名 read -p "请输入用户名&#xff1a;"username useradd $username #提…

Qt 实战(10)模型视图 | 10.5、代理

文章目录 一、代理1、简介2、自定义代理 前言&#xff1a; 在Qt的模型/视图&#xff08;Model/View&#xff09;框架中&#xff0c;代理&#xff08;Delegate&#xff09;是一个非常重要的概念。它充当了模型和视图之间的桥梁&#xff0c;负责数据的显示和编辑。代理可以自定义…

lenovo联想小新 潮7000-14AST(81GE)笔记本原厂Win10系统镜像安装包下载

适用机型&#xff1a;【81GE】 链接&#xff1a;https://pan.baidu.com/s/1ciGya7OjTN73rHFJs52WpQ?pwdkgk4 提取码&#xff1a;kgk4 联想原装出厂系统自带所有驱动、出厂主题壁纸、系统属性联机支持标志、系统属性专属LOGO标志、Office办公软件、联想电脑管家、联想浏览器…

C语言部分输入输出(printf函数与scanf函数,getchar与putchar详解,使用Linux ubuntu)

1.输入输出 1.1.按格式输入输出 printf 可以在man手册中查看 int printf(const char *format, ...); printf:函数名(参数)int:函数的返回值 功能&#xff1a;按格式在终端输出 参数&#xff1a;多参 返回值&#xff1a;输出字符个数 格式&#xff1a; %d int %c char…

Jmeter自动化实战

一、前言 由于系统业务流程很复杂,在不同的阶段需要不同的数据,且数据无法重复使用,每次造新的数据特别繁琐,故想着能不能使用jmeter一键造数据 二、创建录制模板 可参考:jmeter录制接口 首先创建一个录制模板 因为会有各种请求头,cookies,签名,认证信息等原因,导致手动复制…

【mysql】4-2. MySQL存储结构

MySQL存储结构 1 什么是表空间⽂件&#xff1f; 解答问题 表空间⽂件是⽤来存储表中数据的⽂件&#xff0c;表空间⽂件的⼤⼩由存储的数据多少决定&#xff0c;不同的表空间⽂件存储数据的种类也有所不同&#xff0c;在MySQL中表空间分为五类&#xff0c;包括&#xff1a;系统…

Ansible基本使用

目录 介绍 安装 inventory-主机清单 分组 子组 modules-模块 command shell script file copy systemd yum get_url yum_repository user mount cron 介绍 ansible是基于python开发的自动化运维工具。架构相对比较简单&#xff0c;仅需通过ssh连接客户机执行…

HivisionIDPhoto Docker部署以及Springboot接口对接(AI证件照制作)

项目简介 项目以及官方文档地址 HivisionIDPhoto 旨在开发一种实用、系统性的证件照智能制作算法。 它利用一套完善的AI模型工作流程&#xff0c;实现对多种用户拍照场景的识别、抠图与证件照生成。 HivisionIDPhoto 可以做到&#xff1a; 轻量级抠图&#xff08;纯离线&a…

DB-GPT系列(一):DB-GPT能帮你做什么?

DB-GPT是一个开源的AI原生数据应用开发框架(AI Native Data App Development framework with AWEL and Agents)&#xff0c;围绕大模型提供灵活、可拓展的AI原生数据应用管理与开发能力&#xff0c;可以帮助企业快速构建、部署智能AI数据应用&#xff0c;通过智能数据分析、洞察…

整理了一些大模型的课程,非常详细,大模型零基础入门到精通,收藏我这一篇就够了

目前有多个科普类的大模型课程&#xff0c;这些课程涵盖了从基础理论到实际应用的各个方面。以下是一些主要的科普类大模型课程&#xff1a;复旦大学“大模型开发与赋能”专题讲习班&#xff1a;由复旦大学计算机学院邱锡鹏教授带来的《大模型科普讲解》课程&#xff0c;通过深…

Chromium 中profile browser 和WebContents三者之间的关系c++

一、prfile介绍&#xff1a; 1、浏览器默认启动会创建一个默认的profile在Default目录下。 C:\Users\Administrator\AppData\Local\Chromium\User Data\Default目录下 【与窗口绑定】 proflie与N个browser对象绑定。 2、用户新建一个账户会在User Data目录下新建一个prfol…

el-datepicker此刻按钮点击失效

文章目录 此刻按钮失效原因&#xff1a;使用了禁用未来日期解决办法&#xff1a;重写此刻按钮点击事件代码&#xff08;包含禁用未来日期和时分秒的处理&#xff09;框出主要代码&#xff08;因为包含禁用日期功能&#xff09;&#xff08;取你所需&#xff09; 此刻按钮失效原…