二八中医
二八中医
  • 发布:2017-03-01 10:02
  • 更新:2018-12-07 17:40
  • 阅读:5740

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

分类:MUI

详细问题描述
[内容]

<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 负责人:无 分享
已邀请:
杰哥seo

杰哥seo

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

  • 二八中医 (作者)

    应该和vue更新后的dom的宽度计算异常有关


    2017-08-02 22:47

3***@qq.com

3***@qq.com

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

二八中医

二八中医 (作者)

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

1***@qq.com

1***@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楼的方法也有效果

2***@qq.com

2***@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<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;  

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

		});
  • x***@163.com

    感谢,解决了我的问题


    2020-11-18 17:12

该问题目前已经被锁定, 无法添加新回复