实现VAN-LIST的ITEM动态高度

本人系统使用的VANT2，根据需求，要实现van-list的item根据内容改变自身高度。其实整体需求并不算太难，但晚上搜索良久，并没有找到相关的文章，故特此留下记录，为后人解惑。

首先附上template的部分代码。

这里我使用的自定义MessageItem控件作为van-list的item，配合loading插件实现上拉刷新获取更多消息功能。

我们看到这个数据源，是通过messageListArray参数进行传递。为了实现动态item高度，对应MessageItem控件里，我们需要计算出对应高度并给控件高度重新赋值。

updated () {
        this.$nextTick(() => {

            setTimeout(()=>{   //设置延迟执行
                    
                    for (var i = 0; i < this.messageList.length; i++) { 
                        var titleHeight = document.getElementsByClassName('item-title')[i].clientHeight;
                        var contentHeight = document.getElementsByClassName('item-content')[i].clientHeight;
                        var height = 144 - 70 + titleHeight + contentHeight + 'px';
                        var itemHeight = 144 - 70 + 14 + titleHeight + contentHeight + 'px';
                        // console.log(height,'height');
                        document.getElementsByClassName('item-box')[i].style.height = height;
                        document.getElementsByClassName('message-item')[i].style.height = itemHeight;
                    }

                    },100)
        })
    }

这里要注意，不能在mounted方法里执行，因为当数据更新的时候，并不会重新调用该方法。所以我们要在updated方法里去执行，更新数据时也会调用这个方法，从而实现loading更新数据，新item也能实现动态高度。

总结一下，发现只要找准对应的数据获取后生成控件的时机，就能动态改变高度了。