Vue BetterScroll上拉加载数据
文章描述：
Vue BetterScroll上拉加载数据
<template>
<div class="">
<div class="wrapper" ref="wrapper">
<ul class="content">
<li v-for="(item,index) in list" :key="index">
<div class="item">
<div class="small-video-wrap"><img src="https://code.miyil.com/html/baidu-mobile-web/img/7.jpg"/></div>
<div class="text-content">
<div class="title">{{index}}：千金沙滩游玩，黑色吊带连体衣，瞬间成为焦点</div>
</div>
</div>
</li>
</ul>
</div>
<Tabbar></Tabbar>
</div>
</template>import Tabbar from '../components/common/Tabbar.vue'
import BetterScroll from 'better-scroll'
export default{
name:"My",
components:{
Tabbar
},
data(){
return{
list:[1,2,3,4,5,6,7,8,9,10,11,12,13],
scroll:'',
query:{
pageNumber:0,
}
}
},
created() {
this.getList()
},
methods:{
getList(){
// 上拉加载更多
this.$nextTick(() => {
this.scroll = new BetterScroll(this.$refs.wrapper,{
probeType: 3,
click: true,
pullUpLoad: true,
})
var newArr = [14,15,16,17,18,19,20]
this.list.push(...newArr)
// 上拉加载数据，触发pullingup
this.scroll.on("pullingUp",() => {
this.query.pageNumber = this.query.pageNumber + 1;
console.log(this.query.pageNumber)
this.getList()
this.scroll.finishPullUp();
// 重新计算高度
this.scroll.refresh();
})
})
}
}
}.wrapper{
/* height: 400px; */
height: calc(100vh - 80px);
overflow: hidden;
background: #fff;
}
ul{
margin: 0;
padding: 0;
box-sizing: border-box;
}
li{
list-style: none;
padding: 0 16px;
}
.item{
border-top: 1px solid #f0f0f0;
text-decoration: none;
cursor: pointer;
padding-top: 14px;
padding-bottom: 14px;
display: flex;
justify-content: flex-start;
.small-video-wrap {
width: 33.65%;
img{
width: 115px;
height: 76px;
}
}
.text-content {
-webkit-box-flex: 1;
flex: 1;
margin-left: 14px;
.title {
color: #333;
font-weight: normal;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
}
发布时间：2022/12/13
发表评论