uniapp最简单的上拉加载更多demo
data() {
return {
list:[],//数据列表
page: 1,//页数
}
},
//请求一下数据(进入页面请求一次)
onLoad() {
this.getnewsList(this.page)
},
// 监听触底
onReachBottom() {
this.getnewsList(this.page);
},
methods: {
//屏幕到底部时候触发此事件
//以下是演示,具体是要看接口再操作
getnewsList(page) {
uni.request({
//两种写法,看接口所需
//1.如果接口后面数据不是页数的话就这样写
url:'接口',
data:{page}, //2.如果接口后面数据是页数的话就这样写
url:'接口'+page,
success:(res) => {
//如果返回没有数据了,数组长度为0
if (res.data.length==0) {
//没有数据就替换一下loadingText的值
uni.showToast({
title: '没有更多数据了',
icon: 'none',
mask: false
})
return;
}else{
this.page+=1; //每触底一次 page +1
this.list= this.list.concat(res.data); //将数据拼接在一起
} }
});
}
},
遇到的问题, 有些人 遇到tab高度不确定, 点击tab栏 触发触底! 解决方案如下:
data() {
return {
isReachBottom:true,//是否开启触底函数
}
}
methods: {
//屏幕到底部时候触发此事件
//以下是演示,具体是要看接口再操作
getnewsList(page) {
uni.request({
//两种写法,看接口所需
//1.如果接口后面数据不是页数的话就这样写
url:'接口',
data:{page}, //2.如果接口后面数据是页数的话就这样写
url:'接口'+page,
success:(res) => {
this.isReachBottom = true //接口请求到数据, 放开触底
//如果返回没有数据了,数组长度为0
if (res.data.length==0) {
uni.showToast({
title: '没有更多数据了',
icon: 'none',
mask: false
})
return;
}else{
this.page+=1; //每触底一次 page +1
this.list= this.list.concat(res.data); //将数据拼接在一起
} }
});
}
},
// 监听触底
onReachBottom() {
if(!this.isReachBottom) return;
this.getnewsList(this.page);
},
还有, tab切换的时候:
tabClick() {
this.isReachBottom = false; tab栏切换,关闭触底
this.page = 1
this.list = []
this.getnewsList(1)
},
uniapp最简单的上拉加载更多demo的更多相关文章
- 【小程序开发】上拉加载更多demo
wxml: <scroll-view class='swiper-scroll' scroll-y="{{true}}" bindscrolltolower="lo ...
- mui实现分页上拉加载更多 下拉刷新数据的简单实现 移动端下拉上拉
空下来把mui上拉加载更多,下拉刷新数据做了一个简单的实现,希望可以帮助到需要的朋友 demo项目的结构 <!DOCTYPE html> <html> <head> ...
- 免插件,简单实现上拉加载loading
上拉加载是前端经常遇到的问题,采用插件往往能够轻松解决,这里介绍一种免插件简单实现上拉加载的方法,参考一下,下面分享一下代码. html <body> <ul> <li& ...
- 44、gridview实现下拉刷新、上拉加载更多(最简单实现上下拉操作的开源工程!)
1.工程加入以下两个文件夹:(参考:https://github.com/jingchenUSTC/PullToRefreshAndLoad) (待会我会将demo打包上传) 2.这个demo只有一个 ...
- 原生js移动端touch事件实现上拉加载更多
大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...
- android ListView下拉刷新 上拉加载更多
背景 最近在公司的项目中要使用到ListView的下拉刷新和上拉加载更多(貌似现在是个项目就有这个功能!哈哈),其实这个东西GitHub上很多,但是我感觉那些框架太大,而且我这个项目只用到了ListV ...
- Android 上拉加载更多功能
前几天看了github上面的例子,参照它的实现,自己又稍微改了一点,往项目里面增加了一个上拉加载更多功能.具体的实现如下: 首先要重写ListView: import android.content. ...
- android ListView上拉加载更多 下拉刷新功能实现(采用pull-to-refresh)
Android实现上拉加载更多功能以及下拉刷新功能, 采用了目前比较火的PullToRefresh,他是目前实现比较好的下拉刷新的类库. 目前他支持的控件有:ListView, ExpandableL ...
- RecyclerView实例-实现可下拉刷新上拉加载更多并可切换线性流和瀑布流模式(1)
摘要 最近项目有个列表页需要实现线性列表和瀑布流展示的切换,首先我想到的就是上 [RecyclerView],他本身已经很好的提供了三种布局方式,只是简单做个切换应该是很简单的事情,如果要用Recyc ...
随机推荐
- 网络标准之:永远是1.0版本的MIME
目录 简介 MIME详解 MIME头 MIME-Version Content-Type Content-Disposition Content-Transfer-Encoding Encoded-W ...
- 矩池云助力科研算力免费上"云",让 AI 教学简单起来
矩池云是一个专业的国内深度学习云平台,拥有着良好的深度学习云端训练体验,和高性价比的GPU集群资源.而且对同学们比较友好,会经常做一些大折扣的活动,最近双十一,全场所有的RTX 2070.Platin ...
- SQL从零到迅速精通【触发器】
essay from:http://www.cnblogs.com/hoojo/archive/2011/07/20/2111316.html 触发器就类似一个小账本,记录了你在数据库做了哪些操作,可 ...
- laravel 框架增删改查+数据恢复
...............路由页面 //修改页面的自定义路由Route::post('unigoods/updata','uniGoodsController@updata');//数据恢复Rou ...
- (八)React Ant Design Pro + .Net5 WebApi:后端环境搭建-Aop
一.Aop Aop 面向切面编程(Aspect Oriented Program),在项目中,很多地方都会用到Aop的概念,比如:过滤器(Filter),中间件(Middleware) 通常用来处理数 ...
- 关于DP动规
今天学了动规,简单记录一下自己理解了的:(要不俺就忘了) 首先,啥是DP??? 动态规划,其实就是组合子问题的解来解决整个问题的解,由于每个子问题他只判断一次,所以不会重复计算,那就很牛啊!!! 专业 ...
- 6月6日 python学习总结 jQuery (三)
1. 常用事件 1. hover #鼠标悬停监听 2. keydown和keyup #键盘按键 按下/抬起 3. change #监听值的改变 全部输入完失去焦点后 4. focus和blur # 获 ...
- [转载]从phpinfo中能获取哪些敏感信息
phpinfo()想必的最熟悉的了,在搭建环境之后都会随后写一个 phpinfo()来测试环境是否正常,很多人测试完毕忘记删除就开始部署环境了,这就造成了一些敏感信息的泄漏.那么我们能从 phpinf ...
- C++设计模式 - 总结
一个目标:管理变化,提高复用 掌握设计模式一个核心目标:管理变化,提高复用.在使用设计模式中发现并没有实现复用,这就和设计初衷相违背了,说明代买写的不好. 两种手段:分解VS.抽象 在代码设计中,该开 ...
- 网络编程-Python的netaddr库
In [1]: from netaddr import * In [2]: ip = IPAddress('172.16.100.39') ip.format()ip地址的格式化 '172.16. ...