01-vue项目之滚动加载数据

　　最近刚结束了一个vue项目，项目中发现了自己很多问题，例如，看到功能就想要使用插件，(⊙o⊙)…，这样是肯定不行呀，哎，用插件可以，自己也得会写呀，现在就记录一下一个不错的滚动加载数据。

　　1.页面布局（重点是 class="listWrapper" 以及 class="list"）

      <div class="listWrapper" ref="list_c"><ul class="list" v-if="collectlist && collectlist.length>0" ref="list"><li v-for="(item,index) of collectlist" :key="index"><router-link :to="{name:'detail',query:{goods_sku_id:item.goods_sku_id}}"><div class="picture"><img :src="item.image"></div><div class="info-content"><p class="pro-tit">{{item.name}}</p><p class="price"><span>￥{{item.price}}</span><span class="old-price">￥{{item.ot_price}}</span></p><p class="count">已售{{item.sales_num}}件</p></div></router-link><div class="collection-delete" @click="delect(item)"></div></li></ul></div>

　　2.样式

.listWrapper {
position: absolute;
top: 0.88rem;
width: 100%;bottom: 0;
overflow-y: auto;
}
.list {background-color: #fff;}

　　3.js

　　data数据

data() {return {page: 1, pagesize: 8, collectlist: [], canscroll: true, activeisload: true };
}

　　在mounted钩子中添加监听器（addEventListener）

  mounted() {let list_c = this.$refs.list_c;list_c.addEventListener("scroll", () => {if (this.canscroll) {//是否具有触发条件let scroll_top = list_c.scrollTop;let list = this.$refs.list;let list_height = parseInt(getComputedStyle(list).height);let c_height = parseInt(getComputedStyle(list_c).height);if (list_height - (scroll_top + c_height) < 200) {this.canscroll = false; //锁定滚动触发条件if (this.activeisload) {this.page++;this.getCollect();} else {console.log("已加载完所有已收藏的商品");}}}});}

　　请求接口数据（this.$post是封装的方法，自行代入实际场景）

    getCollect: function() {this.$post(url, {page: this.page,pagesize: this.pagesize}).then(res => {if (res.code == 200) {if (res.data.length) {this.collectlist = this.collectlist.concat(res.data);if (res.data.length < this.pagesize) {this.activeisload = false;console.log("已加载完");} else {this.canscroll = true;}}}}).catch();},

转载于:https://www.cnblogs.com/zero18/p/10956741.html

01-vue项目之滚动加载数据相关推荐

vue 实现数据滚动显示_vue 滚动加载数据
table数据多的时候打开页面会加载一会才显示数据,这样体验不好,所以要做滚动加载数据 {{eventMap[scope.row.eventId] == null ? '--': eventMap[s ...
vue2.0无限滚动加载数据插件
做vue项目用到下拉滚动加载数据功能,由于选的UI库(element)没有这个组件,就用Vue-infinite-loading 这个插件代替,使用中遇到的一些问题及使用方法,总结作记录! 安装: ...
php 无限滚动加载,无限滚动,_无限滚动加载数据问题，无限滚动 - phpStudy
无限滚动加载数据问题做移动端程序的时候,经常会遇到无限滚动的功能,通常实现无限滚动的方式是页面滚动到底部后出发一个ajax请求,后端返回数据然后动态追加DOM,但是如果DOM结构很复杂,追加的时候拼 ...
jquery ajax 滚动加载数据
jquery php 滚动加载数据(文件包 rollingpage) 效果如下: 页面加载时候($function(){ 自动加载第一页数据 }) 设置: var winH = $(window).h ...
vue项目首屏加载过慢解决方案
前言因为我的一个vue项目首页打开加载了好久,所以决定优化一下.发现是打包体积太大了,页面才加载慢主要是第三方库. 优化着优化着就想要更好一点,于是逛博客搜索,参照了几个博主的解决方法整理出一下几点 ...
Vue向下滚动加载更多数据-scroll-案例
vue-infinite-scroll 安装 npm install vue-infinite-scroll --save 尽管官方也推荐了几种载入方式,但"最vue"的方式肯定是 ...
【无限滚动加载数据】—infinite-scroll插件的使用
网上对于infinite-scroll插件使用的例子不多.但由于它的出现,鼓吹了瀑布流形式的页面展示方式,所以不得不了解了解这种新的分页方式. 官网上有对infinite-scroll的详细描述,但一 ...
VUE项目中图片加载过大处理方式-渐进式方式-懒加载方式--附源码
解决有两步: 1.采用渐进式加载:原图未加载完时显示比它内存小的模糊图: 2.采用懒加载:只加载可视区域的图片,即滚动到可视区域时再加载图片 vue-lazyload-img:VUE图片懒加载插件 v ...
百度地图：层级地图、行政边界、圆形覆盖物、自定义覆盖物、可视化数据显示、放大及缩小、下拉滚动加载数据等...
写了一天,以下是我自己摸索出来的,暂时只做了两层地图,废话不多说,上图上代码图片: 第一层地图点击圆形覆盖物或者放大地图进入第二层地图,缩放会回到第一层拖拽地图或者缩放地图会触发可视化数据下拉 ...

01-vue项目之滚动加载数据

01-vue项目之滚动加载数据相关推荐

最新文章

热门文章