1、安装
npm install vue-pull-to --save
2、文档
传送门
3、用法
- 引入
<script>
import PullTo from 'vue-pull-to'
export default {
name: 'example',
components: {
PullTo
},
data() {
return {
dataList: []
}
},
methods: {
getMoreList() {
console.log('滚动到底部加载...')
}
}
}
</script>
- 使用
<div id="pullContain">
<pull-to @infinite-scroll="getMoreList" class="file-lists">
<ul>
<li v-for="(fileItem,index) in list" :key="index" >
</li>
<span class="show-msg" v-show="list.length==0">
这里什么都没有了哦
</span>
</ul>
</pull-to>
</div>
4、坑
bottom-block-height 底部在滚动容器外的块级元素区域高度
top-block-height 顶部在滚动容器外的块级元素区域高度
- 栗子
<pull-to @infinite-scroll="getMoreList" :style="{marginTop:`${topBlockHeight}px`,marginBottom:`${bottomBlockHeight}px`}">
</pull-to>
- 切换tab
当切换tab时；滚动条不变；这样很刺激。
//每当切换时；把页码重新定义为1；在把 list清空
methods: {
this_navbar: async function(index) { //nav切换
this.itemContent = [];
// 切换tab初始化
this.$refs.x.Initialization();
// 获取
this.type_id = $('.placeholder').eq(index).data("id");//tabID
$('.placeholder').removeClass('active').eq(index).addClass('active');//选中样式
let params = {
complaintypeid: this.type_id,
page: 1
};
let res = await Http.post(URI.supervise, Api.serviceSupervision.type_list, params),
data = res.data;
this.itemContent = data.data;
this.is10 = data.data.length < 10 ? false : true;//是否超过10条数据
},
}
Initialization() {
this.page = 1;
}
