由于工作原因,需要实现滚动加载的效果(PC端)。之前用的是vue元素,但是元素没有类似的组件,所以我去github找了一个名字叫vue-mugen-scroll,使用起来非常简单方便,所以想和大家分享一下。
一、准备工作
首先,您需要安装组件:
npminstall-save vue-mugen-scroll不需要全局引用,只需在需要的地方引用即可:
从“vue-mugen-scroll”导入MugenScroll导出默认值{ components: { MugenScroll } }第二,编码
直接编码
模板节div id=' user-table ' ref=' user-table ' div El-table : data=' table date '边框样式=' width : 100% ' El-table-column prop=' name ' lab El=' user name '/El-table-column/El-table/div mugen-scroll : handler=' load more ' : short-handle='!正在从“vue-mugen-scroll”加载“scroll-container=”user-table”/mugen-scroll/div/section/template script import mugen scroll;Exportdefault {name:' app ',components: { mugenscroll },data(){ return {//loading status load : false,//当前页码page: 1,//总页数pagetotal: 3,pagesize: 10,//模拟后端返回的数据data 3360[{ id 3360 ' 1 ',name3360' user1' 1' },{ id: ' 2 ',name 3:{id: '7 ',名称:' user7' 7' },{id: '8 ',名称:' user8' 8' },{id: '9 ',名称:' user9'},{id:' 10 ',名称3330。{id: '11 ',名称:' user11' 11' },{id: '12 ',名称:' user12' 12' },{id: '13 ',名称:' user13'},{id:' 14 '。{id: '15 ',名称:' user15' 15' },{id: '16 ',名称:' user16' 16' },{id: '17 ',名称:' user17'},{id:' 18' {id: '19 ',名称:' user19' 19' },{id: '20},methods : {//load more load more(){//如果(this。page=this。page total){ console . log(' load more.');this.loading=true//模拟分页查询让startindex=(this . page-1)* this . page size;让endIndex=startIndex this . page size;this.tableDate.push(.this.datas.slice(startIndex,endIndex));//第1页this.pageconsole . log(this . TableDate);this.loading=false} } }};/scriptstyle作用域为# user-table { width : 400 px;高度: 400 px;溢出-y:滚动;margin: 100px自动;}/style解释一下,这里最重要的是mugen-scroll标签,short-handle属性是是否执行loading方法,handler是具体的loading方法,scroll-container是指向元素的ref。需要注意的是,需要滚动的元素,比如#user-table,需要设置它们的具体高度,滚动条也要设置,就像我在style中写的那样,否则,
第三,效果图
初始效应
滚动后的效果
以上就是本文的全部内容。希望对大家的学习有帮助,支持我们。