slidelist
v0.0.5
Published
滑动加载
Downloads
3
Readme
感谢使用该插件
- 第一步:npm install slidelist
- 第二步:在main.js中引入并使用 import slideList from 'slidelist' Vue.use(slideList)
- 第三步:在需要滑动的窗体中加入如下属性
<div @scroll="handleScroll($event)" style="height: 102%;overflow-y: auto;">
- 第四步:在该窗体中使用插件,具体如下
<slide-list :slideList="slideList" mainWidth="80rem" mainHeight="100%" itemWidth="24%">
<template v-slot:default="slotProps">
<div>
<h1>{slotProps.item.title}</h1>
<p>{slotProps.item.content}</p>
</div>
</template>
</slide-list>
<script>
export default {
data () {
return {
slideList:[
{起始数据}
],
newSlideList:[
{新增数据}
]
}
},
methods: {
handleScroll (e) {
let scrollTop = e.target.scrollTop;
let scrollHeight = e.target.scrollHeight;
let clientHeight = e.target.clientHeight;
if(scrollTop + clientHeight >= scrollHeight){
e.target.scrollTop = scrollHeight * 1.5;
this.slideList = this.slideList.concat(this.newSlideList);
}
}
}
}
</script>
- 可传参数:
slideList(数据列表) mainWidth(列表宽度) mainHeight(列表高度) itemWidth(列表每个单向宽度) 在slot中以 slotProps.item.属性 的方式自定义参数