【报Bug】vue mui mui-scroll 动态加载无效

详细问题描述

[内容]

<div class="mui-content">

<div id="slider" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">

<div class="mui-scroll" id="tmp">

<a v-for="item in activeItems" class="mui-control-item " v-bind:class="{'mui-active':item.active}" @tap="changeType(item)">

{{item.text}}

</a>

</div>

</div>

</div>

vue动态加载mui-scroll的数据后,即使调用

mui('.mui-scroll-wrapper').scroll();仍然无法启用横向滚动

vue中已尝试过绑定Updated事件,也尝试过Nexttick中调用,也尝试过setTimeout延时,

都无效,其他方式,如原生js等直接动态加载的dom都可以正常使用,就是vue加载的dom

无效

重现步骤

[步骤]

[结果]

[期望]

运行环境

[系统版本]

[浏览器版本]

[IDE版本]

[mui版本]

附件

[代码片段]

[安装包]

联系方式

[QQ]

[电话]



2017-03-01 10:02 添加评论 分享
已邀请:
0

杰哥seo

赞同来自:

我也踩到这个坑了,请问楼主怎么解决的?


0

363204195@qq.com

赞同来自:

我也遇到类似问题了,vue+mui区域滚动,输入框录入信息后,有时候滚动不能滚动最上面了


0

二八中医

赞同来自:

你的问题和Vue更新后dom的高度计算异常有关,
需要手动设置,具体参考
原文链接


0

13551477759@qq.com

赞同来自:

这个目前没有更好的解决方法。
我的解决方法是将mui-scroll-wrapper 和mui-content放一起就可以了
<div id="vueApp" class="mui-content mui-scroll-wrapper">
<my inline-template>
<div class="mui-scroll">
</div>
</my>
</div>

3楼的方法也有效果


0

270013494@qq.com

赞同来自:

Vue是异步渲染,必须把mui的组件在dom更新完成后再初始化。
demo如下
var news = new Vue({
el: '#news',
data: {
banner: {}, //顶部banner数据
items: [] //列表信息流数据
}
});

       mui.ready(function() {

var newItems = [];
for(var i=1;i&lt;20;i++){
var item={
guid: 'item.post_id',
title: 'item.title'+i,
author: 'item.author_name',
cover: 'item.cover',
time: '2018-12-09'
}
newItems.push(item);
}

news.items=newItems;
\n

//更新完dom后,初始化mui组件。
setTimeout(function(){
mui('.mui-scroll-wrapper').scroll({
deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
});
mui('.mui-scroll-wrapper').scroll().scrollToBottom();
},500);

        });
\n

要回复问题请先登录注册