vue 上拉加载实现

<ul class="list" ref="scrollBox"><li v-for="(item, index) in data" :key="index">...</li>
</ul>
<script>mounted() {// 监听如果页面发生滚动时this.$nextTick(() => {this.$refs.homeUl.addEventListener('scroll',this.handleScroll,true);});},methods: {// 页面滑到底部需要调用的方法handleScroll() {// 下面这部分兼容手机端和PC端const scrollTop = this.$refs.scrollBox.scrollTop; // 滚动条的位置const windowHeitht = this.$refs.scrollBox.clientHeight; // 在页面上返回内容的可视高度const scrollHeight = this.$refs.scrollBox.scrollHeight; // 返回整个元素的高度（包括带滚动条的隐蔽的地方）// 是否滚动到底部的判断if (Math.round(scrollTop) + windowHeitht === scrollHeight) {//此处加载数据this.loadData();}},}
</script>
<style>
.list{height: calc(100% - xxx);overflow: scroll;
}
</style>

vue 上拉加载实现相关推荐

vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多
一.思路分析和效果图用vue来实现一个瀑布流效果,加载网络图片,同时有下拉刷新和上拉加载更多功能效果.然后针对这几个效果的实现,捋下思路: 根据加载数据的顺序,依次追加标签展示效果: 选择哪种方式实 ...
上拉加载_如何用Vue + Mint UI实现上拉加载更多
引言: 上拉加载更多在移动端不论是在 app 里面还是在页面中都是必不可少的,以下是 mint-ui 中上拉加载更多的总结. 一.在项目中使用 mint-ui 需要先安装查看官网 (1)安装:npm ...
Vue 组件封装之 ScrollView 上拉加载更多
Vue 组件封装之 ScrollView 上拉加载更多一.ScrollView 上拉加载更多二.使用案例三.API 使用指南四.源代码一.ScrollView 上拉加载更多组件说明: 实现 ...
vue移动端下拉刷新组件、上拉加载组件
1.下拉刷新DropDownRefresh.vue <template> <div @touchstart="touchStart($event)" @touch ...
vue 仿B站下拉刷新上拉加载
vue 仿B站下拉刷新上拉加载功能大部分都是跟B站一样的,还是有一些瑕疵和小bug的,φ(>ω<*) 先上demo连接和gitHub项目地址吧 demo展示 https://github ...
vue移动端下拉刷新、上拉加载
由于自身的项目比较简单,只有几个H5页面,用来嵌入app中,所有没有引入移动端的UI框架,但是介于能让用户在浏览H5页面时有下拉刷新和上拉加载,有更好的用户体验,自己写组件实现. 1.下拉刷新Drop ...
vue开发（三）vue-scroller实现下拉刷新，上拉加载笔记（包括吸顶效果失效的问题）
项目中要实现下拉刷新,上拉加载,首先想到了vue-scroller. npm网址:vue-scroller 简单记录一下自己的使用过程,以备不时之需. 安装依赖: npm install vue-sc ...
vue.js上拉加载
vue.js上拉加载注意事项: 1.overflow属性会导致滚动事件失效 2.连续下拉会导致数据加载时出现问题,给了1s的延迟 <!DOCTYPE html> <html lan ...
vue的v-infinite-scroll上拉加载更多
1.安装v-infinite-scroll组件 npm i vue-infinite-scroll -S 2.在main.js引入 import infiniteScroll from 'vue-in ...

vue 上拉加载实现

vue 上拉加载实现相关推荐

最新文章

热门文章