z***@163.com
z***@163.com
  • 发布:2016-10-01 22:30
  • 更新:2016-10-02 10:05
  • 阅读:7862

用的MUI组件中的带区域滚动的那个TAB选项卡组件,但是不能切换

分类:MUI

我是用DOT.js生成的上面切换选项卡和下面内容部分

<div id="slider" class="mui-slider mui-fullscreen">  
				<script type="text/template" charset="utf-8" id='template_1'>  
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">  
					<div class="mui-scroll">  
						<!--<a class="mui-control-item mui-active" href="#item1mobile">  
							推荐  
						</a>-->  
						  
						{{if( it){ }}  
						     
						  {{for(var key in it){ }}  
						       {{if( key=="1"){ }}  
						  	   <a class="mui-control-item mui-active" href="#item{{= key}}mobile">  
						  	   {{ }else{ }}  
						  	   <a class="mui-control-item" href="#item{{= key}}mobile">  
						  	   {{ } }}	  
						  	  {{= it[key]["name"]}}  
						  	</a>  
						  	  
						  {{ } }}  
						{{ }else{ }}  
					<a class="mui-control-item mui-active">  
							无记录  
						</a>  
					{{ } }}  
						  
					</div>  
				</div>  
				<div class="mui-slider-group">  
				  
				  
					  
					{{for(var key in it){ }}  
					{{if( key=="1"){ }}  
					<div id="item{{= key}}mobile" class="mui-slider-item mui-control-content mui-active">  
					{{ }else{ }}  
					<div id="item{{= key}}mobile" class="mui-slider-item mui-control-content">  
					{{ } }}  
						<div class="mui-scroll-wrapper">  
							<div class="mui-scroll">  
								<ul class="mui-table-view">  
								{{for(var i=0;i<it[key]["zhi"].length; i++){ }}  
									<li class="mui-table-view-cell">  
										{{= it[key]["zhi"][i]["时间"]}}:{{= it[key]["zhi"][i]["备注"]}}  
									</li>  
								{{ } }}  
								</ul>  
							</div>  
						</div>  
						  
				  
				  
					</div>  
					  
					{{ } }}  
					  
					  
				  
				</div>  
				</script>  
			</div>

在下面进行了初始化
mui('.mui-scroll-wrapper').scroll({
deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
});
mui.init();

能进行滚动,但是却不能进行切换,下面的部分一直都显示的是<div class="mui-slider-group">中第一个DIV "item1mobile" 中的内容,这是为什么呢。
求朋友们帮助

2016-10-01 22:30 负责人:无 分享
已邀请:
暮雪骄阳

暮雪骄阳

mui框架会默认初始化当前页面的轮播组件;若轮播组件内容为js动态生成时(比如通过ajax动态获取),则需要在动态DOM生成后,就是你代码生成之后,再执行一次slider的初始化方法,重新获取动态添加的节点。代码没毛病,就是你动态生成的节点,需要重新获取,以下为例
//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider({
interval:0//自动轮播周期,若为0则不自动播放,默认为0;
});

  • z***@163.com (作者)

    非常感谢,就是在想怎么初始化,没想到是这句,谢谢


    2016-10-02 10:27

暮雪骄阳

暮雪骄阳

能滚动,是说可以触摸左右滑动,不能切换,是指点击标题按钮不能切换界面,是这个情况吗?
给你一个结构,你自己研究一下代码摆放,滑块内容里,我这里是去掉了 区域滚动的,你可以自己加上去。
<div id="slider" class="mui-slider">
<!--标题导航:开始-->
<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item mui-active" href="#item1"><em>标题按钮一</em></a>
<a class="mui-control-item" href="#item2">标题按钮二</a>
<a class="mui-control-item" href="#item3">标题按钮三</a>
</div>
<!--标题导航:结束-->
<!--标题导航高亮条:开始-->
<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
<!--标题导航高亮条:开始-->
<!--滑块容器:开始-->
<div class="mui-slider-group">
<!--滑块内容一:开始-->
<div id="item1" class="mui-slider-item mui-control-content mui-active">
你的标题一内容
</div>
<!--滑块内容一:结束-->
<!--滑块内容二:开始-->
<div id="item2" class="mui-slider-item mui-control-content">
你的标题二内容
</div>
<!--滑块内容二:结束-->
<!--滑块内容三:开始-->
<div id="item3" class="mui-slider-item mui-control-content">
你的标题三内容
</div>
<!--滑块内容三:结束-->
</div>
<!--滑块容器:结束-->
</div>

z***@163.com

z***@163.com (作者)

非常感谢您的回复。
表现出来的现象是上边的菜单部分可以横向滚动,也可以在点击时切换,

下面的列表部分可以纵向滚动,但是不能切换
我把DOT.JS生成的代码直接替换动态生成部分的代码,再进入页面就可以切换

所以我觉得很奇怪呀,为什么不能呢

这是打印出的生成部分代码

<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">  
			<div class="mui-scroll">  
				<a class="mui-control-item mui-active" href="#item1mobile"> 迟到 </a>  
				<a class="mui-control-item" href="#item2mobile"> 睡觉 </a>  
			</div>  
		</div>  
		<div class="mui-slider-group">  
			<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">  
				<div class="mui-scroll-wrapper">  
					<div class="mui-scroll">  
						<ul class="mui-table-view">  
							<li class="mui-table-view-cell">2016-9-27:迟到a</li>  
							<li class="mui-table-view-cell">2016-9-27:迟到b</li>  
						</ul>  
					</div>  
				</div>  
			</div>  
			<div id="item2mobile" class="mui-slider-item mui-control-content">  
				<div class="mui-scroll-wrapper">  
					<div class="mui-scroll">  
						<ul class="mui-table-view">  
							<li class="mui-table-view-cell">2016-9-27:睡觉a</li>  
							<li class="mui-table-view-cell">2016-9-27:睡觉b</li>  
						</ul>  
					</div>  
				</div>  
			</div>  
		</div>

加上头和尾
我觉得没毛病呀

<div class="mui-content">
		<div id="slider" class="mui-slider mui-fullscreen">  
			<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">  
				<div class="mui-scroll">  
					<a class="mui-control-item mui-active" href="#item1mobile"> 迟到 </a>  
					<a class="mui-control-item" href="#item2mobile"> 睡觉 </a>  
				</div>  
			</div>  
			<div class="mui-slider-group">  
				<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">  
					<div class="mui-scroll-wrapper">  
						<div class="mui-scroll">  
							<ul class="mui-table-view">  
								<li class="mui-table-view-cell">2016-9-27:迟到a</li>  
								<li class="mui-table-view-cell">2016-9-27:迟到b</li>  
							</ul>  
						</div>  
					</div>  
				</div>  
				<div id="item2mobile" class="mui-slider-item mui-control-content">  
					<div class="mui-scroll-wrapper">  
						<div class="mui-scroll">  
							<ul class="mui-table-view">  
								<li class="mui-table-view-cell">2016-9-27:睡觉a</li>  
								<li class="mui-table-view-cell">2016-9-27:睡觉b</li>  
							</ul>  
						</div>  
					</div>  
				</div>  
			</div>  
		</div>  

	</div>  

正常的如头两个图片,点击睡觉切到睡觉列表,点迟到切迟到列表
动态生成的菜单和列表就下面那样了,点了不切换

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