<div class="search-fixed" id="boxFixed" :class="{'is_fixed' : isTabFixed}">
//。。。
</div>
//吸顶
isTabFixed: false,
offsetTop: 0,
mounted() {
// 监听滚动事件
window.addEventListener('scroll', this.initHeight);
this.$nextTick(() => {
this.offsetTop = document.querySelector('#boxFixed').offsetTop;
})
},
// 注意销毁滚动事件
deactivated() {
window.removeEventListener('scroll', this.handleScroll)
},
//吸顶
initHeight() {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
this.isTabFixed = scrollTop > this.offsetTop ? true : false;
//懒加载
if(this.isTabFixed ===true){
// setTimeout(() => { // 防抖操作
let sh = this.$refs['myScrollbar'].scrollHeight // 滚动条高度
let st = this.$refs['myScrollbar'].scrollTop // 滚动条距离顶部的距离
let ch = this.$refs['myScrollbar'].clientHeight // 滚动条外容器的高度
if (st + ch >= sh) {
//到底了-业务逻辑
// console.log('到底了-ids',this.ids.length)
// console.log('到底了-count',this.count)
this.count += 1
this.$nextTick(() => {
if (this.count === this.ids.length) {
this.getGuessLikeList()
}else {
}
}, 5000)
}
// }, 1000)
}
},
//吸顶
.is_fixed{
position: fixed;
top: 0;
width: 100%;
// left: 50%;
// margin-left: -250px;
z-index: 9999;
display: flex;
// justify-content: space-around;
align-items: center;
background-color: #fff;
height: 54px !important;
border-bottom: 4px solid #a0d5eb;
margin: auto 0;
img{
width: 50%;
height: 50%;
margin-top: 25px;
}
}
.search-fixed{
margin: 0 auto;
padding-top: 14px;
padding-bottom: 14px;
height: 97px;
width: 100%;
// position: relative;
display: flex;
// justify-content: space-around;
align-items: center;
}
懒加载-信息列表
//猜你喜欢
getGuessLikeList() {
guessLike({
pageSize: '',
ids: this.ids//传给后台已显示内容id数组
}).then(res => {
if (this.data.length === 0) {
// this.GuessLikeList = res.data.info
this.GuessLikeList = this.GuessLikeList.concat(res.data.info);
} else {
this.GuessLikeList = this.GuessLikeList;
}
for (var i = 0; i < this.GuessLikeList.length; i++) {
this.GuessLikeList[i].exhibition = this.GuessLikeList[i].exhibition.split(",")[0]
//去重+合并
this.ids = Array.from(new Set(this.ids.concat(this.GuessLikeList[i].id)));
}
})
},
版权声明:本文为weixin_58412143原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。