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

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

分类: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

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