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 ...
随机推荐
- laravel中{{}}和{!! !!}的区别详解
{{}}支持转义 一段html代码只是被当成普通的字符串输出 {!! !!} 不支持转义 一段html代码可以被正常的解析 public function html(){ $address=" ...
- laravel7 搜索关键字标红及手机号,身份证号隐藏
控制器代码 public function index(Request $request) { //接受搜索关键字 $word = $request->get('name'); $start = ...
- laravel 怎么获取public路径
app_path() app_path函数返回app目录的绝对路径: $path = app_path(); 你还可以使用app_path函数为相对于app目录的给定文件生成绝对路径: $pa ...
- java多线程中常用指令
------------恢复内容开始------------ 一.写在前面 好久没写博客了,这不快毕业了,应该会重新开始更新博客了.这次主要介绍查看线程状态等一系列常见指令,包括有jps.vmstat ...
- 【数据库】优化SQL语言
第1章数据模型设计 第1条:确保所有表都有主键 [1]当表缺少主键时,会出现各种问题,所有表都必须有一列(或多列)设置为主键. [2]主键应当具备的特征 唯一性,值非空,不可变,尽可能简单 [3]不要 ...
- mysql学习笔记-底层原理详解
前言 我相信每一个程序员都避免不了和数据库打交道,其中Mysql以其轻量.开源成为当下最流行的关系型数据库.Mysql5.0以前以MyISAM作为默认存储引擎,在5.5版本以后,以InnoDB作为默认 ...
- CVE-2017-8759 微软word漏洞复现以及利用
CVE-2017-8759 微软word漏洞复现以及利用 0x00 漏洞描述 近日,360集团核心安全事业部分析团队发现一个新型的Office文档高级威胁攻击,攻击使用了9月12日补丁刚修复的.NET ...
- WIRESHARK 提取百度云客户端中的下载地址
序言:近两年感觉云盘是越来越不行了,什么115,360,华为,新浪一些网盘纷纷关门,现在手里能用的就只剩下一个百度云坚挺着.可那速度,简直感人,好吧,没钱冲VIP,就去找了一个破解版,用了一年,爽得飞 ...
- DC-2
环境搭建 下载地址: https://download.vulnhub.com/dc/DC-2.zip.torrent 从描述中得知有5个flag. 下载好后导入虚拟机 修改网络配置为NAT 探测靶机 ...
- 无刷电调修理方法 | 银燕(EMAX)12A无刷电调维修
一. 银燕(XP-12A)电调修理 笔者的电调在使用4S电池时烧毁,其中一个PMOS管明显烧焦. 将其拆除,买来新元件重新焊接,通电依然冒烟了. 引脚定义 丝印662F: XC6206P332MR 低 ...