2***@qq.com
2***@qq.com
  • 发布:2019-05-20 09:44
  • 更新:2021-03-22 17:49
  • 阅读:1119

mui('#slider').slider();并不好用使用VUE加载到生命周期上也并不好用 UNI-APP平台也有相应的问题

分类:MUI

我真的服了,slider模块也是MUI主大模块之一。动态渲染数据后就不能滑动了。不能给解决一下么?这个问题一直存在论坛里都怨声载道的。说出去让人笑掉大牙啊?主模块数据不能动态加载?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<style type="text/css">
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
</header>
<div class="mui-content">
<div id="slider" class="mui-slider">
<div class="mui-slider-group">

				<div class="mui-slider-item mui-control-content" v-for="d in ExamData">  
					<div class="mui-scroll-wrapper">  
						<div class="mui-scroll">  
							{{d. SHIPNAME}}  
						</div>  
					</div>  
				</div>  

			</div>  
		</div>  
	</div>  
</body>  
<script src="../js/mui.min.js"></script>  
<script src="../js/vue.2.6.10.js"></script>  
<script type="text/javascript">  
	mui.init({  
		swipeBack: false  
	});  

	mui.plusReady(function() {  
		new Vue({  
			el: '#slider',  
			data: {  
				ExamData: null  
			},  
			methods: {  
				Get_ExamData: function() {  
					var _this = this;  
					mui.ajax(  
						'http://XXXXX', {  
							data: {  

							},  
							dataType: 'json', //服务器返回json格式数据  
							type: 'post', //HTTP请求类型  
							timeout: 5000, //超时时间设置为5秒;  
							success: function(res) {  
								_this.ExamData = JSON.parse(res);  
                                                                    mui('#slider').slider();//并不好用 一样还是不能拖动  
								console.log('成功');  
							},  
							error: function(xhr, type, errorThrown) {  
								console.log('失败');  
							}  
						});  
                                    mui('#slider').slider();//并不好用 一样还是不能拖动  
				}  
			},  
			mounted: function() {  
                                    mui('#slider').slider();//并不好用 一样还是不能拖动  
				this.Get_ExamData();  
			}  
		});  
	});  
</script>  

</html>

2019-05-20 09:44 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com

遇到了同样的问题!好失望

帽子平头

帽子平头

这个看下源码就知道了,mui的一开始初始化时就已经初始化slider,那时候vue还没有数据,当vue动态填充数据后,你再去初始化,此时slider方法里有var id = sliderElement.getAttribute('data-slider')这段代码已经有值了,导致它不会重新初始化,从而还是最早初始化状态,因此只要移除这个sliderElement.removeAttribute(''data-slider'),再去初始化就可以了,代码如下:
$('.mui-slider').removeAttr("data-slider");
mui('.mui-slider').slider({
interval: 3000
});

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