uni-app的滚动加载 uni-load-more组件使用

手机端的滚动加载其实就是PC端的分页，触底之后页数加一调用接口，将返回的数据连接在原来的数据后面，就大致完成了。
使用组件
https://ext.dcloud.net.cn/plugin?id=29

<uni-load-more :status="loadmore":contentText="contentText"></uni-load-more>

export default {data() {return {ifBottomRefresh:false,loadmore: 'more',contentText: {"contentdown": "加载更多数据","contentrefresh": "加载中...","contentnomore": "暂无更多数据。"},current: 1,size: 10,tableData:[]}},onReachBottom() {// console.log('触底') this.current += 1// 没有更多数据之后 就不会在触底加载if (this.loadmore == 'noMore') returnthis.ifBottomRefresh = truethis.getData() // 触底 拉取数据},created(){this.getData()},methods:{getData() {const params = {size: this.size,current: this.current}recommendList(params).then(res => {// 从接口里拿数据 使用时 换成自己的//判断是触底加载还是第一次进入页面的加载if (this.ifBottomRefresh) {this.tableData= this.tableData.concat(res.content.records)} else {this.tableData= res.content.records}this.ifBottomRefresh = falsethis.loadmore = this.tableData.length < res.content.total ? 'more' : 'noMore'})},}
}

uni-app的滚动加载 uni-load-more组件使用相关推荐

（仿头条APP项目）6.点击过的新闻列表文字变灰和下拉刷新与滚动加载新闻数据
文章目录一.点击过的新闻列表文字变灰效果图实现思路导入ormlite数据库类依赖利用ormlite创建数据库和表创建数据库类MyDbHelper 创建数据库中的新闻实体类NewInfo 页 ...
无穷滚动加载(v-infinite-scroll)
无穷滚动加载(v-infinite-scroll) 适用场景如淘宝商品页面底部加载更多商品信息知识点 v-infinite-scroll指向一个加载函数,当滚动条到当前标签底部时(本例的标签为ul ...
jquery瀑布流布局和鼠标滚动加载
jquery部分: //引入JQ库(版本不同会有差别) <script src="https://cdn.bootcss.com.jquery/2.1.1/jquery.min.js& ...
动态加载子节点_简易数据分析 10 | Web Scraper 翻页—抓取「滚动加载」类型网页...
这是简易数据分析系列的第 10 篇文章. 原文首发于博客园:简易数据分析 10. 友情提示:这一篇文章的内容较多,信息量比较大,希望大家学习的时候多看几遍. 我们在刷朋友圈刷微博的时候,总会强调一个『 ...
div自动滚动_简易数据分析 10 | Web Scraper 翻页——抓取「滚动加载」类型网页
这是简易数据分析系列的第 10 篇文章. 原文首发于博客园:简易数据分析 10. 友情提示:这一篇文章的内容较多,信息量比较大,希望大家学习的时候多看几遍. 我们在刷朋友圈刷微博的时候,总会强调一个『 ...
无限滚动加载最佳实践
无限滚动加载最佳实践无限滚动(Infinite scrolling),有时候被称为无尽滚动(endless scrolling),这种技术允许用户在大量内容上滚动,眼中看不到结束的地方.这种技术很简 ...
微信小程序实现分页加载，触底加载下一页，滚动加载
这里我就不写wxml了,就是一个列表循环,直接看js代码逻辑,注释都写在代码后面了,这个方法可以实现无限滚动加载,直到加载完最后一条数据,也可以实现触底没数据后,二次触底可以从新加载刷新,学废了就给个 ...
react 实现滚动加载_在React中实现平滑滚动
react 实现滚动加载 Smooth Scrolling, dont know what it is? Well, instead of clicking on a button and being ...
nodejs爬虫 node + cheerio 爬取滚动加载页面
最近在学习nodejs,然后了解到nodejs也可以做爬虫就试了一试还可以就记录一下爬取爱奇艺首页视频标题用到的是node+cheerio,cheerio是jq核心功能的一个快速灵活而又简洁的实现 ...
美团、点评、猫眼App下拉加载效果的源码分享
今天我准备拿大众点评.美团.猫眼电影三款App的实例来分享一下APICloud下拉加载这个模块的效果. 美团App下拉加载效果以美团中的下拉酷似动画的萌萌着小人儿效果作为参考,来实现的一个加载模块. ...

uni-app的滚动加载 uni-load-more组件使用

uni-app的滚动加载 uni-load-more组件使用相关推荐

最新文章

热门文章