wechat-miniprogram / miniprogram-component-plus

MIT License
268 stars 79 forks source link

vtabs 异步加载 vtabs-content 内容数据,内容高度变化问题 #11

Open lypigg opened 4 years ago

lypigg commented 4 years ago

vtabs 异步加载 vtabs-content 内容数据 ,内容高度发生变化。但是vtabs初始化是存储的_contentHeight缓存没有发生变化,_heightRecords没有重新计算。导致点击tab时,内容定位错误。 是否可以增加内容高度变更监控,重新计算_heightRecords的方法。 或者将方法暴露出去, 让开发者监控内容高度变化后,重新计算_heightRecords值?

lypigg commented 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();
                            }
                        }
                    });