vue——吸顶

<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版权协议,转载请附上原文出处链接和本声明。