aefj
aefj
  • 发布:2016-08-21 00:19
  • 更新:2016-08-21 11:00
  • 阅读:3384

使用了div的父子页面,加入了mui-slider后mui-slider-progress-bar显示不正常

分类:MUI
mui

不定义position的话页面会不正常,找到了这个问题后,发现mui-slider-progress-bar(下边的那个小条)又显示不正常了,我将代码放到了货单页中,放到第一页没有问题,第二页就出现了这个问题,我将错误的程序也上传了上来,可以直接下载程序测试,请帮忙查看下,非常非常感谢

<!doctype html>
<html>

<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <link href="css/mui.min.css" rel="stylesheet" />  
    <style type="text/css">  

        .mui-control-content {  
            background-color: white;  
            min-height: 500px;  
        }  

        .mui-fullscreen .mui-segmented-control~.mui-slider-group {  
            position: initial;  
        }  
    </style>  
</head>  

<body>  
    <!-- 主界面菜单同时移动 -->  
    <!-- 侧滑导航根容器 -->  
    <div class="mui-off-canvas-wrap mui-draggable">  
        <!-- 主页面容器 -->  
        <div class="mui-inner-wrap">  
            <!-- 菜单容器 -->  
            <aside class="mui-off-canvas-left" id="offCanvasSide">  
                <div class="mui-scroll-wrapper">  
                    <div class="mui-scroll">  
                        <!-- 菜单具体展示内容 -->  

                    </div>  
                </div>  
            </aside>  
            <!-- 主页面标题 -->  
            <header class="mui-bar mui-bar-nav">  
                <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide"></a>  
                <h1 class="mui-title">标题</h1>  
            </header>  
            <nav class="mui-bar mui-bar-tab">  
                <a id="aShouYe" class="mui-tab-item mui-active" href="#pageShouYe">  
                    <span class="mui-icon mui-icon-home"></span>  
                    <span class="mui-tab-label">首页</span>  
                </a>  
                <a class="mui-tab-item" href="#pageHuoDan">  
                    <span class="mui-icon mui-icon-phone"></span>  
                    <span class="mui-tab-label">货单</span>  
                </a>  
                <!--<a class="mui-tab-item" href="#pageXiaoXi">-->  
                <a id="aShangCheng" class="mui-tab-item">  
                    <span class="mui-icon mui-icon-email"></span>  
                    <span class="mui-tab-label">商城</span>  
                </a>  
            </nav>  
            <!-- 主页面内容容器 -->  
            <div class="mui-content mui-scroll-wrapper">  
                <div class="mui-scroll">  
                    <!-- 主界面具体展示内容 -->  
                    <div class="mui-content">  
                        <div id="pageShouYe" class="mui-control-content mui-active">  

                        </div>  
                        <div id="pageHuoDan" class="mui-control-content">  
                             <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="#sliderFaHuo">  
                                    发货  
                                </a>  
                                <a class="mui-control-item" href="#sliderShouHuo">  
                                    收货  
                                </a>  
                            </div>  
                            <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>  
                            <div class="mui-slider-group">  
                                <div id="sliderFaHuo" class="mui-slider-item mui-control-content mui-active">  
                                    <div id="scroll1" class="mui-scroll-wrapper">  
                                        <div class="mui-scroll">  
                                            <ul class="mui-table-view">  
                                                <li class="mui-table-view-cell">  
                                                    <div hidden="hidden">hkjhkjhkjhkjhkj</div>  
                                                    <div>起点:sdfsdf</div>  
                                                    <div>终点:122123</div>  
                                                </li>  
                                                <li class="mui-table-view-cell">  
                                                    <div hidden="hidden">hkjhkjhkjhkjhkj</div>  
                                                    <div>起点:sdfsdf</div>  
                                                    <div>终点:122123</div>  
                                                </li>  
                                            </ul>  
                                        </div>  
                                    </div>  
                                </div>  
                                <div id="sliderShouHuo" class="mui-slider-item mui-control-content">  
                                    <div id="scroll2" class="mui-scroll-wrapper">  
                                        <div class="mui-scroll">  
                                            <ul class="mui-table-view">  
                                                <li class="mui-table-view-cell">  
                                                    <div hidden="hidden">hkjhkjhkjhkjhkj</div>  
                                                    <div>起点:sdfsdf</div>  
                                                    <div>终点:122123</div>  
                                                </li>  
                                            </ul>  
                                        </div>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                    </div>  
                        </div>  
                        <div id="pageShangCheng" class="mui-control-content">  

                        </div>  
                    </div>  

                </div>  
            </div>  
            <div class="mui-off-canvas-backdrop"></div>  
        </div>  
    </div>  
    <script src="js/mui.min.js"></script>  
    <script type="text/javascript">  
        mui.init()  
    </script>  
</body>  

</html>

2016-08-21 00:19 负责人:无 分享
已邀请:
aefj

aefj (作者)

已经自行解决,解决方法如下

在添加了DIV方式的页面切换后在其中加入了slider后会造成切换出错,需要修改

在样式中添加
.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
border-bottom: 2px solid #FF6600;
}
.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {
background-color: initial;
}
并且将
<div id="slider" class="mui-slider">
中的class="mui-slider"删除会恢复正常

使用了系统自带的mof生成了侧滑菜单后,加入slider后,会造成内容页面不显示,需要在样式中修改样式为:
.mui-fullscreen .mui-segmented-control~.mui-slider-group {
position: initial;
}
修改后,内容页可以正常显示

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