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的更多相关文章

  1. 【小程序开发】上拉加载更多demo

    wxml: <scroll-view class='swiper-scroll' scroll-y="{{true}}" bindscrolltolower="lo ...

  2. mui实现分页上拉加载更多 下拉刷新数据的简单实现 移动端下拉上拉

    空下来把mui上拉加载更多,下拉刷新数据做了一个简单的实现,希望可以帮助到需要的朋友 demo项目的结构 <!DOCTYPE html> <html> <head> ...

  3. 免插件,简单实现上拉加载loading

    上拉加载是前端经常遇到的问题,采用插件往往能够轻松解决,这里介绍一种免插件简单实现上拉加载的方法,参考一下,下面分享一下代码. html <body> <ul> <li& ...

  4. 44、gridview实现下拉刷新、上拉加载更多(最简单实现上下拉操作的开源工程!)

    1.工程加入以下两个文件夹:(参考:https://github.com/jingchenUSTC/PullToRefreshAndLoad) (待会我会将demo打包上传) 2.这个demo只有一个 ...

  5. 原生js移动端touch事件实现上拉加载更多

    大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...

  6. android ListView下拉刷新 上拉加载更多

    背景 最近在公司的项目中要使用到ListView的下拉刷新和上拉加载更多(貌似现在是个项目就有这个功能!哈哈),其实这个东西GitHub上很多,但是我感觉那些框架太大,而且我这个项目只用到了ListV ...

  7. Android 上拉加载更多功能

    前几天看了github上面的例子,参照它的实现,自己又稍微改了一点,往项目里面增加了一个上拉加载更多功能.具体的实现如下: 首先要重写ListView: import android.content. ...

  8. android ListView上拉加载更多 下拉刷新功能实现(采用pull-to-refresh)

    Android实现上拉加载更多功能以及下拉刷新功能, 采用了目前比较火的PullToRefresh,他是目前实现比较好的下拉刷新的类库. 目前他支持的控件有:ListView, ExpandableL ...

  9. RecyclerView实例-实现可下拉刷新上拉加载更多并可切换线性流和瀑布流模式(1)

    摘要 最近项目有个列表页需要实现线性列表和瀑布流展示的切换,首先我想到的就是上 [RecyclerView],他本身已经很好的提供了三种布局方式,只是简单做个切换应该是很简单的事情,如果要用Recyc ...

随机推荐

  1. 微信小程序+laravel 7+ Redis +短信宝 实现手机号验证码登录

    以下代码可以进行优化和封装:这里我实现功能为主,就不封装啦.小伙伴可以自己试着封装一下. 1:书写登录表单 <view class="container"> <v ...

  2. 自定义函数实现atoi功能

    思路: 列如char a[ ] ="123" "1" "2" "3' "\0" 首先遍历这个字符串 知道这个字 ...

  3. web服务器-Nginx下载限速

    web服务器-Nginx下载限速 一. 限速介绍 在生产环境中,为了保护WEB服务器的安全,我们都会对用户的访问做出一些限制,保证服务器的安全及资源的合理分配. 限流(rate limiting)是N ...

  4. sql中数据统计

    今天来说一下使用sql统计数据. 用的H2数据库,用的是DBeaver连接工具.有三表,打印表PRINT_JOB,复印表COPY_JOB和扫描表SCANNER_JOB (这段可以忽略)任务是要统计相同 ...

  5. DDOS反射攻击

    0x01 环境 包含3台主机 attact 作为攻击方,使用Centos7.2 reflect 作为流量放大器,安装有dns .ntp .memcached三种可以放大流量的服务 windows_se ...

  6. Spring事件监听机制源码解析

    Spring事件监听器使用 1.Spring事件监听体系包括三个组件:事件.事件监听器,事件广播器. 事件:定义事件类型和事件源,需要继承ApplicationEvent. package com.y ...

  7. 12.8 typora快捷键

    Markdown学习 标题: n个#号 字体 粗体:要加粗的字两边加两个** 如 ** 粗体** 斜体:两边一个*号 斜体加粗: 两边三个*号 删除线:两边两个波浪号 引用 github 左边一个大于 ...

  8. git 多人在同一分支上迭代开发时,如何保证分支提交历史保持线性

    背景 最近我们组几个同事都投入到了一个新项目,互相之间的功能耦合比较紧密,因此,是打算从master上新拉一个分支,可以理解为我们几个人的开发分支,以develop代替. 一开始,我们是打算像svn那 ...

  9. 请描述一下Struts2的值栈结构,以及它是如何工作的?

    值栈 Value Stack 值栈是Struts2框架的核心概念.所有的核心组件都以某种方式与之进行交互,它提供对上下文信息和执行环境中元素的访问机制.值栈的内容由如下4个层级组成. 1.临时对象 这 ...

  10. JavaScript的一些实用操作(逐步添加)

    1.js代码简洁高效计时 console.time('a'); //记录时间开始 ... console.timeEnd('a'); //记录时间结束 a: 12857.81103515625ms / ...