由于工作的原因,现在需要实现一个滚动加载(PC端)的效果,之前使用的是vue +元素,但没是元素有类似的组件,所以去github上找了一个名叫vue-mugen-scroll,使用起来很简单也很方便,所以给大家分享一下如果使用。
<强>一、准备工作
首先需要安装一下组件:,
npm安装,节省vue-mugen-scroll
不需要全局引,用在需要的地方引用即可:
从“进口MugenScroll vue-mugen-scroll”;
出口默认{
组件:{MugenScroll}
};
<强>二、编码
直接上代码
& lt; template>
& lt; section>
& lt; div id="用户表“ref=坝没П怼北?
& lt; div>
& lt; el-table:数据=" https://www.yisu.com/zixun/tableDate "边境比;
& lt; el-table-column道具=懊帧北昵?坝没彰白４? lt;/el-table-column>
& lt;/el-table>
& lt;/div>
& lt; mugen-scroll:处理程序=" loadMore”:应该处理=" !加载用户表“scroll-container=比;
& lt;/mugen-scroll>
& lt;/div>
& lt;/section>
& lt;/template>
& lt; script>
从“进口MugenScroll vue-mugen-scroll”;
出口默认{
名称:“应用程序”,
组件:{MugenScroll},
数据(){
返回{//加载状态
加载:假的,//当前页数
页:1、//总页数
pageTotal: 3,
页大小:10,//模拟后端返回的数据
数据:(
{id:“1”,名字:“用户1 "},
{id:“2”,名字:“用户2 "},
{id:“3”,名字:“用户3 "},
{id:“4”,名字:“用户4 "},
{id:“5”,名字:“用户5”},
{id:“6”,名字:“用户6 "},
{id:“7”,名字:“用户7 "},
{id:“8”的名字:“用户8 "},
{id:“9”,名字:“用户9 "},
{id:“10”,名字:“用户10 "},
{id:“十一”,名字:“用户11 "},
{id:“12”,名字:“用户12 "},
{id:“13”,名字:“用户13 "},
{id:“14”的名字:“用户14 "},
{id:“15”的名字:“用户15 "},
{id:“16”,名字:“用户16 "},
{id:“17”的名字:“用户17 "},
{id:“18”的名字:“用户18 "},
{id:“19”的名字:“用户19 "},
{id:“20”的名字:“用户20 "},
{id:“21”,名字:“用户21 "},
{id:“22”,名字:“用户22 "},
{id:“23”,名字:“用户23 "},
{id:“24”,名字:“用户24 "},
{id:“25”,名字:“用户25 "},
{id:“26”的名字:“用户26 "},
{id:“27”的名字:“用户27 "}
),//列表中的数据
tableDate: []
};
},
方法:{//加载更多
loadMore () {//是否当前页面不是最后一页
如果这一点。页& lt;=this.pageTotal) {
console.log (“loadMore…”);
这一点。加载=true;//模拟分页查询
让startIndex=(。页- 1)* this.pagesize;
让endIndex=startIndex + this.pagesize;
this.tableDate.push (…this.datas。片(startIndex endIndex));//页码+ 1
this.page + +;
console.log (this.tableDate);
这一点。加载=false;
}
}
}
};
& lt;/script>
& lt; scoped>风格;
#用户表{
宽度:400 px;
身高:400 px;
overflow-y:滚动;
保证金:100 px的汽车;
}
& lt;/style>
说明一下,这里最主要的就是这个标签,属性就是是否需要执行加载方法,<强> 强就是加载的具体方法,<强> 强就是指向的元素的,需要注意的是,需要滚动加载的元素,如<强> 强,需要设置它的具体高度,而且要设置滚动条,就像我在<强> 写到的,不然没有效果。
<强>三、效果图
初始效果
滚动后的效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
