一、onReachBottom()函数

首先，在page.json的style下设置

"pages": [ {"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app","enablePullDownRefresh": true //设置参数为true"onReachBottomDistance":20, //距离底部多远时触发 单位为px}}]

然后在页面使用即可，与生命周期函数同一级别

onReachBottom(){console.log('已触底');}
},

二、在子组件中使用滚动区域scrow-view触底加载

在自定义组件中onReachBottom触底加载事件不起作用，但是我们在业务需求中需要实现此功能，这里可以借用scroll-view 组件。

1.添加scroll-view组件

在子组件外部加上scroll-view 组件，并允许纵向滚动（scroll-y=“true”）。

<scroll-view @scrolltolower="lowerBottom" scroll-y="true" class="scrollHeight">
//组件内容
</scroll-view>

2.设置height

使用竖向滚动时，需要给一个固定高度，通过 class 设置 height。

.scrollHeight {max-height: 100vh;
}

3.在methods方法中写入触底加载的业务逻辑

lowerBottom() {console.log("触底加载");
},

uniapp触底加载相关推荐

uni-app下拉刷新触底加载更多
首先在pages.json 配置文件中配置 "enablePullDownRefresh": true 需要在哪用加载就配置在路由的style里两个事件 //下拉刷新 o ...
微信小程序开发使用onreachBottom实现页面触底加载及分页
目录一简要介绍一下onreachBottom事件二实例展示三遇到的一些问题一简要介绍一下onreachBottom事件 onreachBottom和onLoad以及onShow一样, ...
列表如何做，看这一篇就够啦——触底加载、虚拟滚动与计算展现值
我们作为前端,平时遇到的一大类工作就是展现各种的数据,而列表就是其中一个基础而通用的形式,无论是像Google.百度这样的搜索引擎,到像Facebook.Twitter.掘金这样的用户社区,抑或是像美 ...
vue-infinite-scroll 实现触底加载
说明如果项目中需要实现触底加载,可以使用vue-infinite-scroll来实现. 安装通过下面的命令可以进行安装: npm install vue-infinite-scroll -S 配置 ...
lin-ui实现瀑布流的触底加载
触底加载效果实现思路触底加载更多的细节: 触底: 监测触底事件在触底之后执行一系列动作加载数据: 在触底后需要向服务器请求数据,如果已经请求到了所有数据,应该不再发送请求. 加载状态: 请求数据 ...
微信小程序04---头像上传、瀑布流、下拉刷新、触底加载更多、分包
目录一.头像上传 1.选择图片 wx.chooseImage() 2.上传文件 wx.uploadFile() 二.瀑布流+下拉刷新+触底加载三.分包加载什么是分包为什么要使用分包如 ...
Vue 列表懒加载触底加载
一.方法一描述:列表懒加载+节流效果图: 实现: 组件:LazyLoading <template><div class="lazy-list">< ...
小程序下拉刷新上拉触底加载数据
1. 下拉刷新下拉刷新主要用到「onPullDownRefresh」函数,我们在新建目录然后新建page之后在wxml文件中会自动生成很多生命周期函数,其中就会生成「onPullDownRefres ...
swiper 上滑触发_四种方式快速实现上滑触底加载效果
在智能小程序的开发过程中,上拉加载是一种十分常见的加载效果,最近也收到了一些开发者在开发上拉加载时遇到的问题,今天的内容就为您介绍一下如果想实现下述效果的上拉加载,我们需要如何去做. 以下是为大家总结 ...

uniapp触底加载

文章目录

一、onReachBottom()函数

首先，在page.json的style下设置

然后在页面使用即可，与生命周期函数同一级别

二、在子组件中使用滚动区域scrow-view触底加载

1.添加scroll-view组件

2.设置height

3.在methods方法中写入触底加载的业务逻辑

uniapp触底加载相关推荐

最新文章

热门文章