小程序长列表渲染

最新推荐文章于 2024-09-08 10:47:00 发布

pachongxaiobai

最新推荐文章于 2024-09-08 10:47:00 发布

阅读量263

点赞数

分类专栏：微信小程序 mpvue 文章标签： vue.js

本文链接：https://blog.csdn.net/pachongxaiobai/article/details/116785995

版权

微信小程序同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

mpvue

4 篇文章 0 订阅

订阅专栏

// 消息组件，通过监听消息显示隐藏超出屏幕的消息内容，超出屏幕部分用空标签代替，height撑起高度
// 数据格式变成二维数组 可以减少监听的数量 提高性能

<div :id="'n' + item._id" :style="{'height': showChat ? '' : (height + 'px')}">
  <div :class="{cur: !showChat}">
	// 消息内容
  </div>
</div>

computed: {
    if (that.observerInstance) {
		return
    }
	that.disconnectObserve()
	that.observerInstance = wx.createIntersectionObserver()
	that.$nextTick(function () {
		let timerA = setTimeout(function () {
			that.observerNode()
			clearTimeout(timerA)
		}, 50)
	})
}


disconnectObserve() {
	let that = this
	if (that.observerInstance) {
		that.observerInstance.disconnect()
		that.observerInstance = null
	}
},


observerNode() {
	let that = this
	let id = 'n' + that.item._id
	let dis = -40
	try {
		that.observerInstance.relativeToViewport({top: dis, bottom: dis}).observe('#' + id, res => {
            that.height = res.boundingClientRect.height
			if (res.intersectionRatio === 0) {
				that.showChat = false
			} else {
				that.showChat = true
			}
		});
	} catch (error) {
	}
},