vue.js上拉加载

注意事项：

1.overflow属性会导致滚动事件失效

2.连续下拉会导致数据加载时出现问题，给了1s的延迟

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>demo</title>
</head><style>* {margin: 0;padding: 0;}[v-cloak] {display: none !important;}html,body {width: 100%;height: 100%;/* overflow-x: hidden; *//* overflow: scroll; */}.empty {height: 800px;}
</style><body><div id="demo" v-cloak><div class="empty"></div><ul><li v-for="item in lists">item</li></ul><h2>{{paging.loadingMessage}}</h2></div>
</body>
<script src="vue.js"></script>
<script>var vum = new Vue({el: "#demo",data: {paging: {PageIndex: 1,PageSize: 10,isTrue: false,showLoading: false,loadingMessage: "上拉加载更多~"}, //分页lists: []},methods: {handleScroll() {var that = this;//判断滚动到底部if (document.body.scrollTop >= document.body.clientHeight - window.screen.availHeight) { //滚动高度>=页面高度-屏幕高度if (that.paging.isTrue) {setTimeout(function() {that.paging.PageIndex++;that.paging.showLoading = true;that.paging.loadingMessage = "正在加载中~";that.getList();}, 1000); //防止连续下拉that.paging.isTrue = false;}}},getList() {var that = this;let datas = [];for (let i = 0; i < 10; i++) {datas.push({i})}that.paging.PageIndex == 1 ? that.lists = datas : that.lists = that.lists.concat(datas);if (datas.length < that.paging.PageSize) {that.paging.isTrue = false;that.paging.loadingMessage = "暂时没有更多消息了哦~";} else {that.paging.isTrue = true;that.paging.loadingMessage = "上拉加载更多~";}}},mounted() {//监听滚动window.addEventListener('scroll', () => {this.handleScroll();});//初始加载数据setTimeout(() => {this.getList();}, 1000);}})
</script></html>

vue.js上拉加载相关推荐

php mescroll,mescroll.js上拉加载下拉刷新组件使用详解
本文实例为大家分享了上拉加载下拉刷新组件mescroll.js的具体代码,供大家参考,具体内容如下使用注意事项: 1.引入的时候出问题及时看官方给出的解决方案(基本上都必须看): 2.react中一 ...
js上拉加载ajax数据,原生ajax写的上拉加载实例
上拉加载的思路 1 上拉加载是要把屏幕拉到最底部的时候触发ajax事件请求数据 2.所有要获取屏幕的高度文档的高度和滚动的高度下面的代码是已经做好了兼容的可以直接拿来用 Javascript: ...
vue 实现上拉加载下拉刷新（思路贼清晰）
项目需要用到上拉刷新下拉加载所以自己手动实现了一个组件: <template><div class="my-scroll" :class="[scr ...
vue 实现上拉加载下拉刷新（思路清晰）
项目需要用到上拉刷新下拉加载所以自己手动实现了一个组件: <template><div class="my-scroll" :class="[scr ...
vue vant上拉加载下拉刷新
index.vue <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> < ...
vue 实现上拉加载
其实就是在 mounted添加 window.addEventListener("scroll", this.handleScroll, true); 实时获取 scrollTop ...
小程序解决上拉加载更多时数据超过1024KB
参考: 如果解决小程序1024kb渲染之坑小程序渲染数据超过 1024k 的解决办法新手不会用组件,只能自己再弄一个简单一点的解决,直接上代码. app.js // arr 数组,len 长度, ...
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多
一.思路分析和效果图用vue来实现一个瀑布流效果,加载网络图片,同时有下拉刷新和上拉加载更多功能效果.然后针对这几个效果的实现,捋下思路: 根据加载数据的顺序,依次追加标签展示效果: 选择哪种方式实 ...
上拉加载_如何用Vue + Mint UI实现上拉加载更多
引言: 上拉加载更多在移动端不论是在 app 里面还是在页面中都是必不可少的,以下是 mint-ui 中上拉加载更多的总结. 一.在项目中使用 mint-ui 需要先安装查看官网 (1)安装:npm ...

vue.js上拉加载

vue.js上拉加载相关推荐

最新文章

热门文章