VUE列表页中实现分页（下拉到底部触发下⼀页）<!--  -->
<template>
<div class="funGoodsArea">
<div class="fun-goods-box1">
<div class="fun-div1">
<img src="@/assets/img/fun-goods2.png"
class="img-banner" />
</div>
<div class="fun-div2"
v-show="buyOutList.length > 0">
<p class="t-p">海淘·趣货</p>
<div class="fun-goods-scroll">
<!-- 列表 -->
<div class="fun-goods-scroll-list"
v-for="(item, index) in buyOutList"
:key="index"
@click="details(item.buyout_id)">
<img :src="ds_pic"
class="t-left" />
<div class="t-right">
<div class="t-div1">{{ item.title }}</div>
<div class="t-div2">每⼈限购{{ item.max_count }}件</div>
<div class="t-div3">
<span :>已抢{{ item.sales }}件</span>
</div>
<div class="t-div4">
<p class="t-div4-p1"><span>￥</span>{{ item.buyout_price }}</p>
<p class="t-div4-p2">⽴即买断</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fun-goods-box2">
<ActivityList :goodsList="goodsList"
:user_tel='1'
@goodsDetails="goodsDetails"></ActivityList>
<div class="onFooter"
v-show="onFooter==1">到底啦~</div>
</div>
</div>
</template>
<script>
import ActivityList from"@/components/ActivityList.vue";
import {
getBuyoutActiveList,
getBuyoutGoodsList
} from"@/api/index.js";
export default {
components: {
ActivityList
},
data () {
return {
buyOutList: [],
htmlbordergoodsList: [],
page: 1,
limit: 15,
onFooter: 0,
onPullDown: true, //下拉加载
listlength: 1
};
},
mounted () {
var that = this
window.addEventListener('scroll', this.scroll, false) // 监听（绑定）滚轮滚动事件
},
methods: {
//⽔平滚动数据⽆分页
getBuyoutActiveList () {
var that = this
var par = {
token: Item('token')
}
getBuyoutActiveList(par)
.then(result => {
if (de == 200) {
that.buyOutList = result.data
} else {
that.$ssage);
}
})
.catch(err => {
that.$ssage);
});
},
// 列表数据有分页
getBuyoutGoodsList () {
var that = this
var par = {
page: that.page,
limit: that.limit,
token: Item('token')
}
getBuyoutGoodsList(par)
.then(result => {
if (de == 200) {
if (dsList.length < that.limit) {
}
that.listlength = dsList.length;
} else if (that.page > 1 && de == "-9003") {
// that.$toast("加载完毕");
} else if (de == "-9003") {
that.listlength = result.data.length;
} else {
that.$ssage);
}
})
.catch(err => {
that.$ssage);
});
},
// 滚动加载分页
scroll () {
var that = this
// scrollTop 滚动条滚动时，距离顶部的距离
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// windowHeight 可视区的⾼度
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;      // scrollHeight 滚动条的总⾼度
var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;      // 滚动条到底部的条件
if (scrollTop + windowHeight == scrollHeight && PullDown == true) {
// 加载数据
that.page = that.page + 1
}
},
// 商品跳详情页
goodsDetails (val) {
var that = this;
that.$router.push({ path: "/goodsDetails", query: { goodsId: val } });
},
// 进⼊详情页
details (val) {
var that = this;
that.$router.push({
path: "/funGoodsAreaDetail", query: {
buyout_id: val,
enterStatus: 'funGoodsArea'
}
});
}
},
destroyed () {
}
};
</script>
<style lang="scss">
.funGoodsArea {
.fun-goods-box1 {
background: white;
padding-bottom: 0.3rem;
margin-bottom: 0.3rem;
.fun-div1 {
width: 100%;
background-repeat: no-repeat;
background-image: url("../../assets/img/fun-goods1.png");      background-size: 100% 100%;
margin-bottom: 0.3rem;
.img-banner {
width: calc(100% - 0.6rem);
margin-left: 0.3rem;
margin-top: 0.6rem;
}
}
.fun-div2 {
margin: 0rem 0.3rem;
.t-p {
font-weight: bold;
color: #333333;
font-size: 0.32rem;
padding: 0.3rem 0rem;
}
.fun-goods-scroll {
width: 100%;
white-space: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
display: flex;
.
fun-goods-scroll-list {
padding: 0.2rem;
box-sizing: border-box;
width: 5rem;
background: rgba(245, 245, 245, 1);
border-radius: 0.06rem;
display: flex;
margin-right: 0.2rem;
.t-left {
width: 1.6rem;
height: 1.8rem;
margin-right: 0.2rem;
border-radius: 0.05rem;
}
.t-right {
width: 10rem;
.t-div1 {
font-size: 0.26rem;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 2.8rem;
margin-bottom: 0.1rem;
color: #333333;
}
.t-div2 {
color: #e42121;
font-size: 0.2rem;
margin-bottom: 0.1rem;
}
.t-div3 {
background: white;
border-radius: 0.13rem;
font-size: 0.2rem;
margin-bottom: 0.1rem;
span {
background: #f63a3d;
color: #ffffff;
border-radius: 0.13rem;
padding: 0rem 0.06rem;
display: inline-block;
min-width: 30%;
}
}
.
t-div4 {
display: flex;
justify-content: space-between;
.t-div4-p1 {
color: #ef2222;
font-size: 0.26rem;
font-weight: 600;
}
.t-div4-p2 {
background: #ef2222;
color: #ffffff;
border-radius: 0.06rem;
padding: 0rem 0.06rem;
box-sizing: border-box;
font-size: 0.2rem;
}
}
}
}
}
}
}
.
fun-goods-box2 {
margin-bottom: 0.2rem;    .onFooter {
text-align: center;
padding: 0.2rem 0;
}
}
}
</style>