vue 上拉加载更多示例代码

可以比较简单的改为 mpvue , 去除滚动判断,直接放在 onReachBottom 周期即可。

html

<div id="app">
<div class="integralPage">
<div class="itemList">
<div class="itemBox" v-for="(item, index) in list" :key="index">
<div class="info">
<div class="title">{{item.title}}</div>
<div class="time">{{item.time}}</div>
</div>
<div class="num">{{item.num}}</div>
</div>
</div>
<div class="laodMore">
<div v-show="logStatus === 0">
<div>上拉加载</div>
</div>
<div v-show="logStatus === 1">
<div>正在加载</div>
</div>
<div v-show="logStatus === 2">
<div>没有更多数据了</div>
</div>
</div>
</div>
</div>

js

const obj = {
el: '#app',
data: {
list: [],
listParam: {
page: 1,
},
noData: false,
logStatus: 0,
},
created() {
setTimeout(() => {
this.list = [...new Array(20).keys()].map(item => ({ // 初始化数据
title: +new Date() + '签到' + item,
time: '2019/8/13 15:23:22',
num: '+10',
}))
this.listParam.page += 1
}, 500);
window.addEventListener('scroll', this.onScroll)
},
methods: {
onScroll() { // 如果是小程序, 不用监听滚动事件, 也不用户判断高度, 因为小程序有触底事件 onReachBottom , 直接在其中写请求逻辑即可
this.logStatus = 1
let innerHeight = document.querySelector('#app').clientHeight // #app 是为了获取最外部 div 的高度
let outerHeight = document.documentElement.clientHeight
let scrollTop = document.documentElement.scrollTop
console.log('onScroll', outerHeight, scrollTop, outerHeight + scrollTop, innerHeight)
if (outerHeight + scrollTop === innerHeight) { // 可以在这个地方给 innerHeight 添加适当的高度调整效果
if (this.noData === true) {
this.logStatus = 2
return false
}
setTimeout(() => {
const data = { // 请求回来的数据
rows: [...new Array(10).keys()].map(item => ({
title: +new Date() + '签到' + item,
time: '2019/8/13 15:23:22',
num: '+10',
})),
count: 40, // 服务器上总数
}
if (this.list.length < data.count) { // 本地总数是否大于服务器总数
this.list = [...this.list, ...data.rows]
this.listParam.page = this.listParam.page + 1
this.logStatus = 0
} else {
this.logStatus = 2
this.noData = true
}
}, 500);
}
}
}
}
const $vue = new Vue(obj)

less

.integralPage {
font-size: 14px;
color: #101010;
// 分类列表
.itemList {
border-top: 1px solid #bbb;
margin-left: 12px;
margin-right: 12px;
.itemBox {
margin-left: 16px;
margin-right: 2px;
border-bottom: 1px solid #E8E8E8;
padding-top: 7px;
padding-bottom: 7px;
overflow: hidden;
.info {
float: left;
max-width: 80%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.time {
font-size: 10px;
color: #878686;
}
}
.num {
padding-top: 10px;
padding-right: 10px;
float: right;
}
}
}
// 上拉加载
.laodMore {
padding-top: 8px;
padding-bottom: 8px;
color: #ccc;
text-align: center;
}
}

mpvue

<template>
<div class="integralPage">
<div class="itemList">
<div class="itemBox" v-for="(item, index) in list" :key="index">
<div class="info">
<div class="title">{{item.title}}</div>
<div class="time">{{item.time}}</div>
</div>
<div class="num">{{item.num}}</div>
</div>
</div>
<div class="laodMore">
<div v-show="logStatus === 0">
<div>上拉加载</div>
</div>
<div v-show="logStatus === 1">
<div>正在加载</div>
</div>
<div v-show="logStatus === 2">
<div>没有更多数据了</div>
</div>
</div>
</div>
</template> <script>
export default {
data () {
return {
list: [],
listParam: {
page: 1,
},
noData: false,
logStatus: 0,
}
},
// 上拉加载,拉到底部触发
onReachBottom() {
this.onScroll()
},
created() {
setTimeout(() => {
this.list = [...new Array(20).keys()].map(item => ({ // 初始化数据
title: +new Date() + '签到' + item,
time: '2019/8/13 15:23:22',
num: '+10',
}))
this.listParam.page += 1
}, 500);
},
methods: {
onScroll() { // 如果是小程序, 不用监听滚动事件, 也不用户判断高度, 因为小程序有触底事件 onReachBottom , 直接在其中写请求逻辑即可
this.logStatus = 1
// 可以在这个地方给 innerHeight 添加适当的高度调整效果
if (this.noData === true) {
this.logStatus = 2
return false
}
setTimeout(() => {
const data = { // 请求回来的数据
rows: [...new Array(10).keys()].map(item => ({
title: +new Date() + '签到' + item,
time: '2019/8/13 15:23:22',
num: '+10',
})),
count: 40, // 服务器上总数
}
if (this.list.length < data.count) { // 本地总数是否大于服务器总数
this.list = [...this.list, ...data.rows]
this.listParam.page = this.listParam.page + 1
this.logStatus = 0
} else {
this.logStatus = 2
this.noData = true
}
}, 500);
}
}
}
</script> <style lang="scss" scoped>
.integralPage {
font-size: 14px;
color: #101010;
// 分类列表
.itemList {
border-top: 1px solid #bbb;
margin-left: 12px;
margin-right: 12px;
.itemBox {
margin-left: 16px;
margin-right: 2px;
border-bottom: 1px solid #E8E8E8;
padding-top: 7px;
padding-bottom: 7px;
overflow: hidden;
.info {
float: left;
max-width: 80%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.time {
font-size: 10px;
color: #878686;
}
}
.num {
padding-top: 10px;
padding-right: 10px;
float: right;
}
}
}
// 上拉加载
.laodMore {
padding-top: 8px;
padding-bottom: 8px;
color: #ccc;
text-align: center;
}
}
</style>

vue mpvue 上拉加载更多示例代码的更多相关文章

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

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

  2. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  3. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  4. h5 实现页面上拉加载更多数据

    您好,您的上拉加载更多的代码来喽: html:(style部分:html部分:js部分--js部分主要就是监控上拉,调接口) //上拉加载更多css <style> .wait-loadi ...

  5. vue移动端上拉加载更多

    LoadMore.vue <template> <div class="load-more-wrapper" @touchstart="touchSta ...

  6. vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多

    一.思路分析和效果图 用vue来实现一个瀑布流效果,加载网络图片,同时有下拉刷新和上拉加载更多功能效果.然后针对这几个效果的实现,捋下思路: 根据加载数据的顺序,依次追加标签展示效果: 选择哪种方式实 ...

  7. google官方的下拉刷新+自定义上拉加载更多

    转载请标注转载:http://blog.csdn.net/oqihaogongyuan/article/details/50949118 google官方的下拉刷新+自定义上拉加载更多 现在很多app ...

  8. mui的上拉加载更多 下拉刷新 自己封装的demo

    ----------------------------------------------- 这是一个非常呆萌的程序妹子,深夜码的丑代码------------------------------- ...

  9. 微信小程序之下拉刷新,上拉加载更多

    近日开发微信小程序,发现上拉加载更多没有友好的API,而下拉刷新很nice,所以本人按照API,很简单的写了一个示例,希望对大家有帮助,本人用的是iview-webapp  小程序UI框架. 1. 首 ...

随机推荐

  1. Mac Docker安装MySQL5.7

    mkdir mysql 在~目录下创建mysql目录 docker run --restart=always --name mysql5.7 -p 3306:3306 -v ~/mysql:/var/ ...

  2. selenium中的等待方法及区别

    等待是为了使脚本执行更加稳定 常用的休眠方式: 1.time模块的sleep方法 :引入from time import sleep 2.implicitly_wait():设置webdriver等待 ...

  3. Tomcat项目内存参数调优

    一.常见的Java内存溢出有以下三种: 1. Java.lang.OutOfMemoryError: Java heap space 即JVM Heap溢出 解释说明:JVM在启动的时候会自动设置JV ...

  4. linux中添加自定义命令

    centos下设置alias别名,比较简单,例如: vim /root/.bashrc addalias rm='rm -i' Linux alias设置指令的别名命令详解 功能说明:设置指令的别名. ...

  5. Vue --- 基础指令

    目录 表单指令 条件指令 循环指令 分隔符(了解) 过滤器 计算属性 监听属性 冒泡排序 表单指令 使用方法: v-model 数据双向绑定 v-model绑定的变量可以影响表单标签的值,反过来表单标 ...

  6. SpringCloud过滤filter

    目录 配置文件 application.yml eureka: client: service-url: defaultZone: http://localhost:8001/eureka serve ...

  7. php web开发——文件夹的上传和下载

    核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开 ...

  8. 2019.12.10 switch(){ case: }

    if 适合判断范围 switch 适合判断某个值 两种方法: import java.util.Scanner; class Demo02 { public static void main(Stri ...

  9. 关于异常System.ArgumentException

    什么是System.ArgumentException 当向方法提供的参数之一无效时引发的异常. 继承 Object Exception SystemException ArgumentExcepti ...

  10. Python面向对象 -- slots, @property、多重继承MixIn、定制类(str, iter, getitem, getattr, call, callable函数,可调用对象)、元类(type, metaclass)

    面向对象设计中最基础的3个概念:数据封装.继承和多态 动态给class增加功能 正常情况下,当定义了一个class,然后创建了一个class的实例后,可以在程序运行的过程中给该实例绑定任何属性和方法, ...