<template>
<div class="wraper" @scroll="onScroll($event)">
<div class="item" v-for="item in items">
{{item}}
</div>
</div>
</template> <script>
export default {
data () {
return {
items:[],
pgSize:36,
rawItems:[],
pgNo:1
}
}, ready () {
for(var i=0;i<=1000;i++){
this.rawItems.push(i)
}
this.changePgItems()
},
methods:{
onScroll(event){
var offsetHeight = event.currentTarget.offsetHeight,
scrollHeight = event.target.scrollHeight,
scrollTop = event.target.scrollTop,
scrollBottom = offsetHeight + scrollTop
if(scrollTop===0)
{
if(this.pgNo===1)
{
return
}
this.pgNo--
this.changePgItems()
event.target.scrollTop=offsetHeight-1
}
if(scrollBottom===scrollHeight || scrollBottom===scrollHeight+2)
{
if(this.pgNo==Math.ceil(this.rawItems.length/this.pgSize))
{
return
}
this.pgNo++
this.changePgItems()
event.target.scrollTop=1
}
},
changePgItems(){
var start = (this.pgNo-1) * this.pgSize,
items = this.rawItems.slice(start,this.pgSize+((this.pgNo-1)*this.pgSize))
this.items = items
}
}
} </script> <style lang="less"> .wraper{
border:1px solid red;
height:100vh;
overflow-y: auto;
box-sizing: border-box; .item{
height: 30px;
border-bottom: 1px solid #ccc;
}
}
</style>

  

vue 滚动加载的更多相关文章

  1. 笔记-VUE滚动加载更多数据

    来源:https://blog.csdn.net/qq_17281881/article/details/87342403 VUE滚动加载更多数据 data() { return { loading: ...

  2. Vue滚动加载自定义指令

    用Vue在移动端做滚动加载,使用mint-ui框架, InfiniteScroll指令loadmore组件,在uc浏览器和qq浏览器都无法触发.无奈我只能自己写了. 决定用vue 的自定义指令 写滚动 ...

  3. vue 滚动加载数据

    参考链接:https://www.npmjs.com/package/vue-infinite-scroll

  4. 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

    通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...

  5. vue 原生添加滚动加载更多

    vue中添加滚动加载更多,因为是单页面所以需要在跳出页面时候销毁滚动,要不会出现错乱.我们在mounted建立滚动,destroyed销毁滚动. mounted () { window.addEven ...

  6. 关于Vue+iview的简单下拉框滚动加载

    话不多说,直接上代码,作用是下拉框内容无限滚动加载: Html: <FormItem style="position:relative" label="用户名:&q ...

  7. Vue无限滚动加载数据

    Web项目经常会用到下拉滚动加载数据的功能,今天就来种草Vue-infinite-loading 这个插件,讲解一下使用方法! 第一步:安装 npm install vue-infinite-load ...

  8. 记录WEUI中滚动加载的一个BUG

    最近写微信公众号,用到的技术栈是jq+vue的混合开发,采用的UI是移动端比较火的WEUI,在微信开发中应该较广泛.个人看惯了elementUI文档,相对于饿了么组件文档的详细,WEUI的文档还是比较 ...

  9. vue2.0无限滚动加载数据插件

      做vue项目用到下拉滚动加载数据功能,由于选的UI库(element)没有这个组件,就用Vue-infinite-loading 这个插件代替,使用中遇到的一些问题及使用方法,总结作记录! 安装: ...

随机推荐

  1. js confirm函数 删除提示

    <a href="del.php" onclick="return confirm('是否将此留言信息删除?')">删除留言</a>

  2. Linux 折腾汇集,实时更新

    一.Linux教程 入门教程:http://www.92csz.com/study/linux/ 命令大全:http://man.linuxde.net/ 一.界面: 在Ubuntu.Linux Mi ...

  3. Asp.net MVC验证哪些事(2)-- 验证规则总结以及使用

    上篇文章Asp.net MVC验证那些事(1)-- 介绍和验证规则使用中,介绍了Asp.net MVC中的验证功能以及如何使用.这里将对MVC中内置的验证规则进行总结. 一,查找所有验证规则 上篇文章 ...

  4. Linux下防火墙开启相关端口及查看已开启端口

    最近利用Apache Mina实现了一个http服务,发布到linux下发现无法访问,通过HttpClient来发送http请求时,报如下错误: Exception in thread "m ...

  5. ORACLE SQL Developer日期显示格式设置

    ORACLE的SQL Developer工具默认的日期格式DD-MON-RR,在SQL查询中往往你看不到时间信息,此时你必须修改日期格式.具体如下所示 工具->首选项->数据库->N ...

  6. SQL Server 内存相关博文

    Don’t confuse error 823 and error 832 本文大意:      错误832:           A page that should have been const ...

  7. MySQL锁机制总结(二)

    前言: Mysql是一个支持插件式存储引擎的数据库系统,本文讨论的锁机制也主要包含两部分SERVER层的锁和存储引擎的锁,存储引擎是指innodb,其它存储引暂不讨论. 1. 数据库中锁相关的基本概念 ...

  8. spring ehcache 页面、对象缓存

    一.Ehcache基本用法 CacheManager cacheManager = CacheManager.create(); // 或者 cacheManager = CacheManager.g ...

  9. JSON字符串和Dictionary字典类型的相互转换

    在开发过程中,往往会遇到数据类型转换的情况,根据自己的业务,可能转换类型有多种,下面就说一下json字符串和字典类型的转换. public static class JsonUntity { /// ...

  10. 安装Mysql 5.7.1

    现在安装MySQL变成了一件非常人性化的事情,因为有了MySQL-installer这个工具,它可以帮助我们全程安装MySQL.     下面我来简单介绍一下如何使用,以供新手学习:     .首先下 ...