1.创建组件components > zj-roll > index.vue
<template>
<div>
<slot></slot>
<div class='bottom' v-if='(!lastPage.total && lastPage.empty!=0)'>---------- <span >我也是有底线的</span> ----------</div>
<div class='loading' v-if='lastPage.total && lastPage.empty!=0'>
<!-- <img src='@/assets/loading.png' /> -->
玩命加载中</div>
</div>
</template>
<script>
export default {
name: 'scroll',
props: ['lastPage'],
data: function () {
return {
startY: 0,
endY: 0,
initTop: null,
move: 0,
a: 0,
b: 0
}
},
methods: {
getScrollTop () {
let scrollTop = 0
let bodyScrollTop = 0
let documentScrollTop = 0
if (document.body) {
bodyScrollTop = document.body.scrollTop
}
if (document.documentElement) {
documentScrollTop = document.documentElement.scrollTop
}
scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop
return scrollTop
},
// 文档的总高度
getScrollHeight () {
let scrollHeight = 0
let bodyScrollHeight = 0
let documentScrollHeight = 0
if (document.body) {
bodyScrollHeight = document.body.scrollHeight
}
if (document.documentElement) {
documentScrollHeight = document.documentElement.scrollHeight
}
scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight
return scrollHeight
},
// 浏览器视口的高度
getWindowHeight () {
var windowHeight = 0
if (document.compatMode === 'CSS1Compat') {
windowHeight = document.documentElement.clientHeight
} else {
windowHeight = document.body.clientHeight
}
return windowHeight
},
handleScroll () {
if (this.getScrollTop() + this.getWindowHeight() === this.getScrollHeight()) {
this.$emit('zj-load')
}
}
},
mounted () {
window.addEventListener('scroll', this.handleScroll)
}
}
</script>
<style lang="less" scoped>
.bottom{
padding:20px 0;
width:100%;
text-align: center;
font-size:16px;
color: #bbb;
span{
margin:0 16px;
}
}
.loading{
padding:20px 0;
text-align: center;
display: flex;
justify-content:center;
align-items: center;
font-size:16px;
color: #bbb;
img{
animation: mymove .5s linear infinite;
width:30px;
height:30px;
margin-right:10px;
}
} @-webkit-keyframes mymove {
0% {transform:rotate(0deg);}
50% {transform:rotate(180deg);}
100% {transform:rotate(360deg);}
} </style>
2.页面中引用组件
<template>
<div class="collection" v-if="show">
<scroll style="position:relative;-webkit-overflow-scrolling : touch;overflow:auto;margin-bottom:45px;" @zj-load="listLoad" :lastPage='{total: !allLoaded, empty: ulList.length}'>
<x-header :left-options="{backText: ''}">我的收藏</x-header> <stopData :ulList="ulList" collection="收藏" v-if="ulList.length > 0"></stopData> <div class="noPoster" v-else>
<div class="font32">
<img src="../../assets/sp_iconx.png"/>暂无收藏～
</div>
</div>
</scroll>
</div>
</template> <script>
import { XHeader } from 'vux'
import stopData from '@/components/stop'
import { collectGoods } from '@/api'
import { timingSafeEqual } from 'crypto';
import { types } from 'util';
import scroll from '@/components/zj-roll' export default {
data () {
return {
ulList: [],
pageSize: 3,
pageIndex: 1,
show: false,
allLoaded: false
}
},
components: {
stopData,
XHeader,
scroll
},
mounted () {
this.defined()
},
methods: {
listLoad(){
let that = this
if (!that.allLoaded) {
that.defined()
}
},
async defined(){
let that = this
//调取收藏列表数据
const {data} = await collectGoods({pageSize: this.pageSize, pageIndex: this.pageIndex})
if (data.code == 0) {
this.ulList = this.ulList.concat(data.data.page.list)
// 判断是否还有下一页，如果是pageIndex加一
if (data.data.page.hasNextPage) {
this.allLoaded = false
this.pageIndex = this.pageIndex + 1
} else {
this.allLoaded = true
}
this.show = true
}
},
}
}
</script> <style lang="less">
.collection{
.noPoster{
margin-top: 5.333333rem /* 400/75 */;
display: flex;
justify-content: center;
align-items: center;
color: #999999;
z-index: 0;
background: #ffffff;
div{
display: flex;
align-items: center;
}
img{
width: .746667rem /* 56/75 */;
height: .8rem /* 60/75 */;
margin-right: .32rem /* 24/75 */;
}
}
}
</style>