vue 滚动加载
<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 滚动加载的更多相关文章
- 笔记-VUE滚动加载更多数据
来源:https://blog.csdn.net/qq_17281881/article/details/87342403 VUE滚动加载更多数据 data() { return { loading: ...
- Vue滚动加载自定义指令
用Vue在移动端做滚动加载,使用mint-ui框架, InfiniteScroll指令loadmore组件,在uc浏览器和qq浏览器都无法触发.无奈我只能自己写了. 决定用vue 的自定义指令 写滚动 ...
- vue 滚动加载数据
参考链接:https://www.npmjs.com/package/vue-infinite-scroll
- 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...
- vue 原生添加滚动加载更多
vue中添加滚动加载更多,因为是单页面所以需要在跳出页面时候销毁滚动,要不会出现错乱.我们在mounted建立滚动,destroyed销毁滚动. mounted () { window.addEven ...
- 关于Vue+iview的简单下拉框滚动加载
话不多说,直接上代码,作用是下拉框内容无限滚动加载: Html: <FormItem style="position:relative" label="用户名:&q ...
- Vue无限滚动加载数据
Web项目经常会用到下拉滚动加载数据的功能,今天就来种草Vue-infinite-loading 这个插件,讲解一下使用方法! 第一步:安装 npm install vue-infinite-load ...
- 记录WEUI中滚动加载的一个BUG
最近写微信公众号,用到的技术栈是jq+vue的混合开发,采用的UI是移动端比较火的WEUI,在微信开发中应该较广泛.个人看惯了elementUI文档,相对于饿了么组件文档的详细,WEUI的文档还是比较 ...
- vue2.0无限滚动加载数据插件
做vue项目用到下拉滚动加载数据功能,由于选的UI库(element)没有这个组件,就用Vue-infinite-loading 这个插件代替,使用中遇到的一些问题及使用方法,总结作记录! 安装: ...
随机推荐
- Android 自定义控件(一)
本文用一个简单的例子来说明一下自定义控件的步骤实现,自定义控件有几种实现类型,分别为继承自view完全自定义,继承现有的 控件实现特定效果,继承viewgroup实现布局类等: 本文研究的是继承自vi ...
- 【AdaBoost算法】弱分类器训练过程
一.加载数据(正样本.负样本特征) def loadSimpData(): #样本特征 datMat = matrix([[ 1. , 2.1, 0.3], [ 2. , 1.1, 0.4], [ 1 ...
- PHP curl https访问问题
PHP curl https访问问题,原代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 /* @String url URL地址 * @Array data P ...
- 检测PC端和移动端的方法之一
window.mobileCheck = function() { var check = false; (function(a){if(/(android|bb\d+|meego).+mobile| ...
- CSS3之让背景图片全部显示
起初是在处理一个图片显示的问题, 图片没有有一部分没有显示出来, 之后用到了background-size, 发现有必要总结一下. background-size 首先声明 background-si ...
- Mac SVN 命令行
Mac自带了SVN命令行,如我的升级到10.10(OSX yosemite)后命令行版本为1.7.10 以下是一些常用命令 1.将文件checkout到本地目录 svn checkout path(p ...
- 调整busybox中syslogd读取内核printk信息长度
busybox 默认读取内核printk信息长度256, 通过CONFIG_FEATURE_SYSLOGD_READ_BUFFER_SIZE宏可调整, 如下: #cd busybox-1.21.1#m ...
- ELF Format 笔记(四)—— 节(Section)
ilocker:关注 Android 安全(新入行,0基础) QQ: 2597294287 ELF 文件可以包含很多 section,所有的 section 都在 section header tab ...
- 聚合数据董铭彦:小程序开发的兴起将带火API数据交易
2016中关村大数据日活动近日在京举办,今年新进驻北京的聚合数据受邀参与,在13日举行的大数据交易专场论坛上,聚合数据副总裁董铭彦与参会嘉宾以"共筑数据交易产业生态,共享大数据时代红利&qu ...
- fiddler抓包工具1
名称 含义 # 抓取HTTP Request的顺序,从1开始,以此递增 Result HTTP状态码 Protocol 请求使用的协议,如HTTP/HTTPS/FTP等 Host 请求地址的主机名 U ...