uniapp实现区域滚动、下拉刷新、上滑滚动加载更多

news2024/12/25 14:31:33

背景:

在uniapp框架中,有两种实现办法。第1种,是首先在page.json中配置页面,然后使用页面的生命周期函数;第2种,使用<scroll-view>组件,然后配置组件的相关参数,包括但不限于:滚动区域、触底加载。。。这里注意要给scroll-view设置一个height不然滚动不了

效果展示:

 

根据开发实际情况,我推荐第2种、第3种解决办法。

一、单个页面的配置

官方链接:点击跳转官网

第一步,是在pages.json配置开启下拉刷新 

{
            "path": "pages/PMS/document/officialDocument",
            "style": {
                "navigationStyle": "custom",
                "enablePullDownRefresh": false, //配置后,可以下拉刷新,上拉加载`
                "onReachBottomDistance": 100
            }
        },

就已经成功开启下拉刷新,与触底加载了,当然还需要相对应的事件去触发。接下来就介绍一下所需要的事件函数。

onReachBottom()  (上拉时到底部多少距离触发的事件)    官方语言:页面滚动到底部的事件。可在pages.json里定义具体页面底部的触发距离onReachBottomDistance,比如设为50,那么滚动页面到距离底部50px时,就会触发onReachBottom事件。

uni.startPullDownRefresh() (直接调用一次下拉事件)官方语言:开始下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。

onPullDownRefresh()   (下拉后触发的事件)官方语言:处理函数(和onLoad等生命周期函数同级),监听该页面用户下拉刷新事件。

 上滑触底加载:

核心代码:

	onLoad() {
			
	},
    onReachBottom(){
    //上拉到底时触发,onReachBottom函数跟生命周期同级
		let  allTotal = this.formData.page * this.formData.pageSize
		    if(allTotal < this.total){
		        this.page ++;//当前条数小于总条数 则增加请求页数
				this.getData() //调用加载数据方法
		    }else{
		        console.log('已加载全部数据')
		    }
	},
    onPullDownRefresh(){
    //下拉刷新触发,onPullDownRefresh函数跟生命周期同级
        this.list = []
        this.getData()//调用获取数据方法
        setTimeout(() => {
            //结束下拉刷新
          uni.stopPullDownRefresh ();
        }, 1000);
    },

加载动态效果:

使用组件:
<uni-load-more :status="status"></uni-load-more>
<script>
export default {
    data(){
        status: 'more',
        page:'1',
        pageSize:'10'
    },
    onLoad() {
			
	},
 	onReachBottom() {
			let allTotal = this.page * this.pageSize;
			if (allTotal < this.total) {
				this.status = 'loading';  //加载中状态
				this.page++;
                this.getData()
			} else {
				this.status = 'noMore'; //加载完状态
			}
		},
    }
</script>

 备注说明:

因为通过验证console.log(),按照设计图来写,滚动区域不一样。不会出发onReachBottom()。推荐第2种解决方式。。。

二、scroll-view组件的滚动区域、触底加载

官网链接:点击跳转官网

 

@refresherpulling  //下拉刷新控件被下拉

@refresherrefresh  //下拉刷新被触发

@refresherrestore  //下拉刷新被复位

@scrolltoupper  //滚动到顶部/左边,会触发 scrolltoupper 事件

@scrolltolower  //滚动到底部/右边,会触发 scrolltolower 事件

核心代码:

<template>
<scroll-view
            class="dialogue-box"
            style="height: 86vh"
            :scroll-y="true"
            :refresher-threshold="10"
            :scroll-top="scrollTop"
            @scrolltolower="handelLower"
            :refresher-enabled="isLoadingTop"
            :refresher-triggered="isTriggeredTop"
            @refresherrefresh="handleRefresher"
            @refresherrestore="handelonRestore"
          >
</scroll-view>
</template>

<script>
export default {
data() {
    return {
      tableList: [],
      lazyLoad: true,
      shipGuid: "",
      scrollTop: "50px",
      loadings: "more", //more/loading/noMore
      isLoadingTop: true,
      isTriggeredTop: true,
      isShowBtm: false,
};
},
method:{
    getTableList(info, load) {
      //发起网络请求
      getFiles(info).then((res) => {
        if (res.data.code == 0) {
          const resData = res.data.data;
          if (load) {
            this.tableList = this.tableList.concat(resData);
            if (resData && resData.length == 0) {
              // console.log("没有更多了");
              uni.hideLoading();
              this.loadings = "noMore";
            } else {
              uni.hideLoading();
              this.loadings = "more";
            }
            return resData;
          } else {
            this.tableList = resData;
            this.noNum = !this.tableList.length;
          }
        }
      });
    },
    handelLower() {
      console.log("滚动到底部>>>");
      this.isShowBtm = true;
      if (this.loadings == "loading") return;
      if (!this.loadings == "noMore") return;
      this.loadings = "loading";
      this.pages.page += 1;
      let info = {
        ...this.pages,
        shipGuid: this.shipGuid,
      };
      this.getTableList(info, true);
    },
    handleRefresher() {
      console.log("顶部下拉刷新s>>>", this.isLoadingTop, this.isTriggeredTop);
      this.isLoadingTop = true;
      this.isTriggeredTop = true;
      if (!this.isLoadingTop) return;
      let info = {
        ...this.pages,
        shipGuid: "",
      };
      this.$store.commit("setShipGuids", "");
      this.getTableList(info);
      this.isLoadingTop = false;
      this.isTriggeredTop = false;
    },
    handelonRestore() {
      console.log("handelonRestore>>>");
      this.isLoadingTop = true;
    },
},
</script>

备注:

scroll-view组件要设置一个height。一般是设置为(某某vh) 

三、第2种的优化

背景:

第2种已经能够实现下拉刷新和触底加载。但是我们只想要触底加载,并且想让scroll-view组件的高度是自适应的,不再设置 滚动区域的高度scrollHeight

注意:关于高度,通过设置css样式解决,通过给最外层的盒子,设置min-height:0;

 这次使用uniapp+uView组件实现:

效果展示:

代码:

<template>
    <view class="regionalregulation_contanier">
        <!-- <TopNavibarVue :listData="listData" :currentTabIndex="currentTabIndex" @clickTabs="clickTabs"></TopNavibarVue> -->
        <template v-for="item in listData">
            <view class="regionalregulation_content" v-if="currentTabIndex == item.id" :key="item.id">
                <!-- <u-sticky bgColor="#fff">
                    <view style="padding: 20rpx 20rpx 0rpx 20rpx;">
                        <FormItem :formItems="formItems" @searchData="searchData"></FormItem>
                    </view>
                </u-sticky> -->
                <view class="content_list" v-if="tableData.length">
                    <scroll-view :scroll-y="true" @scrolltolower="handelLower">
                        <view v-for="i in tableData" :key="i.pid">
                            <CardTopBTNVue :data="i" :detail="{ title: item.subName }"></CardTopBTNVue>
                        </view>
                        <u-loadmore :status="loadings" v-if="isShowBtm" />
                    </scroll-view>
                </view>
                <view class="content_list" v-else>
                    <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无匹配信息">
                    </u-empty>
                </view>
            </view>
        </template>
    </view>
</template>
<script>
export default {
data() {
        return {
            pages: {
                pageNum: 1,
                pageSize: 7,
            },
            tableData: [],
            scrollTop: "50px",
            loadings: "loadmore", //loadmore/loading/nomore
            isShowBtm: false,
}
methods: {
    async getTableList(params, id, _isLower) {
            const {
                data: res
            } = await this.listData[id].apiPost(params)
            if (res.code == 0) {
                const resData = res.data
                if (_isLower) {
                    this.tableData = [...this.tableData, ...resData]
                } else {
                    this.tableData = resData
                }
                this.loadings = resData.length < params.pageSize ? "nomore" : "loadmore";
            } else {
                this.tableData = []
            }
            // this.isShowBtm = false;
            setTimeout(function () {
                uni.hideLoading();
            }, 500);
        },
        handelLower() {
            this.isShowBtm = true;
            if (this.loadings == "loading") return;
            if (this.loadings == "nomore") return;
            this.loadings = "loading";
            this.pages.pageNum += 1;
            this.getTableList(this.pages, this.currentTabIndex, true);
        },
}
</script>

<style lang="scss" scoped>
.regionalregulation_contanier {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .regionalregulation_content {
        min-height: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;

        .content_list {
            min-height: 0;
            flex: 1;
            overflow-y: auto;
            padding: 0rpx 20rpx;
            margin-top: 10rpx;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            box-sizing: border-box;

            uni-scroll-view {
                height: 100%;
            }
        }
    }
}
</style>

CSS布局中最小高度的妙用——最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持BOX的高度为一定,超出就自动向下延伸 

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

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

相关文章

【SpringBoot】电脑商城-07-上传头像

基于SpringMVC的文件上传 1 MultipartFile接口 MultipartFile接口常用的的API见下表&#xff1a; 方法功能描述String getOriginalFilename()获取上传文件的原始文件名&#xff0c;即该文件在客户端中的文件名boolean isEmpty()判断上传的文件是否为空&#xff0c;当没有选择…

flowable源码解读——并行多实例节点任务是否是顺序生成

最近在项目开发中需要在多实例开始监听里修改一个全局的计数变量&#xff0c;不太确定并行多实例任务在底层引擎是顺序生成还是并行生成的&#xff0c;如果是顺序生成的则不影响&#xff0c;如果是并行生成 则修改一个全局的计数变量就会出现数据错误问题&#xff0c;查阅了flo…

JVM的原理和性能调优

java是如何做到跨平台&#xff1f; 将java文件通过javac编辑到JVM中&#xff0c;由JVM根据操作系统&#xff08;Windows&#xff0c;Linux&#xff09;的需要&#xff0c;生成出相对应的二进制文件&#xff0c;从而达到跨平台的特性。 JVM的组成 将java文件通过javac编译成clas…

逻辑回归C参数选择,利用交叉验证实现

目录 前言 一、C参数 二、交叉验证 1.交叉验证是什么 2.交叉验证的基本原理 3.交叉验证的作用 4.常见的交叉验证方法 三、k折交叉验证 四、C参数和k折交叉验证的关系 五、代码实现 1.导入库 2.k折交叉验证选择C参数 3.建立最优模型 总结 前言 逻辑回归&#xff0…

TCP vs UDP:揭秘可靠性与效率之争

概述 今天我们开始主要讲解TCP的相关知识点。在之前讲解分层章节的时候&#xff0c;我们提到过一个重要观点。在网络层及以下几层&#xff0c;更多的是让主机与主机建立连接&#xff0c;也就是说你的电脑需要知道另一台电脑在哪里才能连接上它。然而&#xff0c;在网络中的通信…

世界各国-经济距离数据汇总(2005-2022年)

世界各国-经济距离数据汇总&#xff08;2005-2022年&#xff09; 经济距离是衡量国家之间经济制度差异的一个重要概念&#xff0c;它不仅包括地理距离&#xff0c;还涵盖了费用、时间、劳动力等因素&#xff0c;并且受到消费者行为的影响。随着全球化的深入发展&#xff0c;国家…

微信H5下载文件、微信浏览器无法下载文件解决方案

手机端的微信访问网页的时候&#xff0c;是禁止直接下载文件的 但是IOS端可以预览.txt/.doc/.docx/.xls/xlsx/.pdf等格式的文件&#xff0c;Android端在下载这些格式的文件时&#xff0c;可以唤起 ‘即将离开微信&#xff0c;在浏览器打开’ 提示 所以&#xff0c;根据手机微…

【计算机组成原理】三、存储系统:3.磁盘存储器(磁盘阵列RAID)

7.磁盘存储器&#xff08;机械&#xff09; 考点&#xff1a;磁盘存取时间的计算 与操作系统有重合&#xff0c;操作系侧重算法管理&#xff0c;计组侧重硬件 计算机的外存储器又称为辅助存储器&#xff0c;目前主要使用磁表面存储器。 所谓“磁表面存储”&#xff0c;是指把某…

等保测评基础:了解等级保护的基本概念

在数字化时代&#xff0c;信息安全已成为企业乃至国家层面不可忽视的议题。等级保护制度&#xff0c;作为我国信息安全保障体系的重要组成部分&#xff0c;旨在通过标准化、等级化的安全管理措施&#xff0c;确保信息系统安全可控。本文旨在为初学者提供等保测评的基础知识&…

Aixos食用指南,超全面详细讲解!

前言&#xff1a;axios是目前最流行的ajax封装库之一&#xff0c;用于很方便地实现ajax请求的发送。特意花费了两个小时为大家准备了一份全面详细的Aixos食用指南&#xff0c;需要的小伙伴点个关注 哦~&#x1f495; &#x1f308;&#x1f308;文章目录 Axios 简介 Axios 特…

Java重修笔记 第三十七天 日期类

第一代日期类&#xff1a;Date 1. 通过 new 一个 Date 对象来获取当前时间 2. 通过 SimpleDateFormat 对象来格式化时间的输出 public class Date01 {public static void main(String[] args) {// 获取系统当前时间Date date01 new Date();System.out.println("当前日…

周边乡村游小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;游客&#xff0c;景点信息管理&#xff0c;景点美食管理&#xff0c;美食类型管理&#xff0c;景点攻略管理&#xff0c;特产信息管理&#xff0c;特产类型管理&#xff0c;系统管理 微信端账号功能包…

猫头虎分享:如何选择GPT-4、GPT-4 Turbo、GPT-4o 和 GPT-4o mini?

猫头虎分享&#xff1a;如何选择GPT-4、GPT-4 Turbo、GPT-4o 和 GPT-4o mini&#xff1f; 大家好&#xff0c;我是猫头虎 &#x1f44b;&#xff0c;今天我们要讨论的是在各种场景下如何选择合适的智能助手模型。随着人工智能技术的发展&#xff0c;OpenAI推出了多种型号的GPT…

【C++ Primer Plus习题】2.3

问题: 解答: #include <iostream> using namespace std;void print01() {cout << "三只眼瞎的老鼠" << endl; }void print02() {cout << "看他们怎么跑" << endl; }int main() {print01();print01();print02();print02();r…

EmguCV学习笔记 VB.Net 6.3 轮廓外接多边形

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 EmguCV是一个基于OpenCV的开源免费的跨平台计算机视觉库,它向C#和VB.NET开发者提供了OpenCV库的大部分功能。 教程VB.net版本请访问…

聚类分析|距离与相似系数|层次聚类|K均值聚类|SPSS及Matlab

聚类分析问题描述 聚类分析问题描述 人类认识世界的方法之一就是将事物按照各种属性或特征分成若干类别。 物以类聚、人以群分。分类方法多种多样&#xff0c;简单直接的如高、矮、胖瘦。使用的信息量小&#xff0c;但对类别界限附近的案例&#xff0c;分类结果不一定合适。 …

Linux 命令管道介绍

今天给伙伴们分享一下Linux 命令管道&#xff0c;希望看了有所收获。 我是公众号「想吃西红柿」「云原生运维实战派」作者&#xff0c;对云原生运维感兴趣&#xff0c;也保持时刻学习&#xff0c;后续会分享工作中用到的运维技术&#xff0c;在运维的路上得到支持和共同进步&am…

软考:软件设计师 — 15.数据结构及算法应用

十五. 数据结构及算法应用 数据结构及算法应用类题目是下午场考试中的第四道题目&#xff0c;分值 15 分&#xff0c;主要以 C 语言填空、算法策略判断和时间复杂度判断为考察形式&#xff0c;建议拿到 6 分以上。 1. 解题技巧 算法策略与时间复杂度部分详细内容可以参考文章…

测试干货 | 如何选择合适的半导体检测方法?看完这篇就明白了!

撰文排版&#xff1a;刘佳 审核指导&#xff1a;肖俊灵 本文较长&#xff0c;建议先收藏后随时查看&#xff01;以后我们将更新更多此类硬核科普&#xff0c;欢迎关注&#xff01; 半导体材料作为半导体产业链中的重要支撑&#xff0c;包括以硅、锗等为代表的元素半导体材料和以…

图与树的基本概念

目录 引言 图与树结构的重要性 图的基本概念 图的表示方式 图的遍历算法 树的基本概念 树的定义与性质 树的遍历 二叉树与多叉树的概念 图与树的高级应用 最短路径算法 最小生成树算法 总结与应用 综合实例分析 引言 在计算机科学的世界中&#xff0c;图和树是两…