l***@163.com
l***@163.com
  • 发布:2016-12-15 15:56
  • 更新:2017-04-27 20:03
  • 阅读:2208

选项卡,竖屏横屏来回切换,选项卡下面的子项对应不上

分类:MUI

问题:在竖屏查看选项卡2的时候,查看的子项都是属于选项卡2的(图1)


;接着从竖屏转成横屏,查看到的子项变成了属于选项卡1的(图2)

;然后从横屏转成竖屏,查看到的子项又变成属于选项卡3的(图3)

。查看选项卡3时也会重复出现以上问题。测试过选项卡少于或等于2个时该问题不存在。
代码:
<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" id="collectBtn" href="#listLDBWDaiBan">
待办
</a>
<a class="mui-control-item" id="collectBtn2" href="#listLDBWYiBan">
已办
</a>
<a class="mui-control-item" id="collectBtn3" href="#listLDBWDaiYue">
待阅
</a>
<a class="mui-control-item" id="collectBtn4" href="#listLDBWYiYue">
已阅
</a>
</div>
</div>
<div class="mui-slider-group">
<div id="listLDBWDaiBan" class="mui-slider-item mui-control-content mui-active">
<div class="mui-scroll-wrapper">
<div class="mui-scroll" id="daiBanList">
<ul class="mui-table-view" id="taskContainer4">

							</ul>  
						</div>  
					</div>  
				</div>  
				<div id="listLDBWYiBan" class="mui-slider-item mui-control-content">  
					<div class="mui-scroll-wrapper">  
						<div class="mui-scroll" id="yiBanList">  
							<ul class="mui-table-view" id="taskContainer5">  

							</ul>  
						</div>  
					</div>  
				</div>  
				<div id="listLDBWDaiYue" class="mui-slider-item mui-control-content">  
					<div class="mui-scroll-wrapper">  
						<div class="mui-scroll" id="daiYueList">  
							<ul class="mui-table-view" id="taskContainer6">  

							</ul>  
						</div>  
					</div>  
				</div>  
				<div id="listLDBWYiYue" class="mui-slider-item mui-control-content">  
					<div class="mui-scroll-wrapper">  
						<div class="mui-scroll" id="yiYueList">  
							<ul class="mui-table-view" id="taskContainer7">  

							</ul>  
						</div>  
					</div>  
				</div>  

			</div>  
		</div>  
	</div>  


                          //阻尼系数  
			var deceleration = mui.os.ios ? 0.003 : 0.0009;  
			mui('.mui-scroll-wrapper').scroll({  
				bounce: true,  
				indicators: true, //是否显示滚动条  
				deceleration: deceleration  
			});  

			mui.each(document.querySelectorAll('.mui-slider-group .mui-scroll'),  
				function(index, pullRefreshEl) {  
					mui(pullRefreshEl).pullToRefresh({  
						down: {  
							callback: function() {  
								console.log('downing');  
								var self = this;  
								console.log(index);  
								setTimeout(function() {  
									if(index === 0) {  
										todoList4.pulldownRefreshHandle(self);  
									} else if(index === 1) {  
										todoList5.pulldownRefreshHandle(self);  
									} else if(index === 2) {  
										todoList6.pulldownRefreshHandle(self);  
									} else if(index === 3) {  
										todoList7.pulldownRefreshHandle(self);  
									} else {  
										this.endPullDownToRefresh();  
									}  
								}, 1000);  

							}  
						}  
					});  
				}  
			);  
2016-12-15 15:56 负责人:无 分享
已邀请:
Trust

Trust - 少说废话

最新的Hello mui示例tab-with-viewpagerindicator.html中,未重现此问题。

目前比较好的办法是,自己监听一下resize,获取当前的index,并且手动切换至该选项,确保不会滚动错误。

window.addEventListener('resize', function(e) {  
    var currentNum = mui('#slider').slider().getSlideNumber(); //获取当前滚动位置  
    mui('#slider').slider().gotoItem(currentNum); //滑动到指定位置  
});
c***@qq.com

c***@qq.com

最新版还是没解决这个问题。监听并用1楼的方法处理了也没用。

c***@qq.com

c***@qq.com

调试了是_nearestSnap方法的问题。切换横竖屏的时候,传入_nearestSnap的x还是切换屏幕方向之前的x坐标值。

c***@qq.com

c***@qq.com

环境 iPhone最新iOS10.2.1, Mac 10.12.3

林书

林书

先refresh(),再gotoItme()

window.addEventListener('resize', function(e) {  
		var slider=mui('#slider').slider();  
	        var currentNum = slider.getSlideNumber(); //获取当前滚动位置  
	        slider.refresh();  
	       slider.gotoItem(currentNum); //滑动到指定位置  
			     
		});
  • c***@qq.com

    谢谢 换了fadeIn的tab 以后再试试这个方法


    2017-05-04 15:06

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