Open lypigg opened 4 years ago
目前我的处理方法。在vtabs-content的index.wxml 中增加了一个 标记
<view class="weui-vtabs-content__item" style="position: relative;" id="weui-vtabs-content__{{tabIndex}}">
<slot></slot>
<view class="flag" style="position: absolute;top: {{flagTop}}px;width: 1px;height: 1px;right: 0;opacity: 0;">
</view>
</view>
修改了vtabs-content的index.js文件,在attached生命周期中增加边界碰撞监听,进行内容高度的变化监听。从而再更新vtabs中的heightRecords
attached: function attached() {
this._observer = wx.createIntersectionObserver(this)
. relativeTo('.weui-vtabs-content__item').observe('.flag',res => {
this.calcHeight(this.change)
})
},
detached: function () {
this._observer.disconnect()
}
},
methods: {
calcHeight: function calcHeight(callback) {
this.change = callback
var query = this.createSelectorQuery();
query.select('.weui-vtabs-content__item').boundingClientRect((rect) => {
this._rect = rect
this.setData({
flagTop: rect.height
})
callback && callback(rect);
}).exec();
}
}
});
vtabs 异步加载 vtabs-content 内容数据 ,内容高度发生变化。但是vtabs初始化是存储的_contentHeight缓存没有发生变化,_heightRecords没有重新计算。导致点击tab时,内容定位错误。 是否可以增加内容高度变更监控,重新计算_heightRecords的方法。 或者将方法暴露出去, 让开发者监控内容高度变化后,重新计算_heightRecords值?