AaronC

发布：2014-11-27 10:53
更新：2014-11-27 18:00
阅读：2720

如下代码如何加入单页滚动互不影响

分类：MUI

默认话题

<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" href="#item1mobile">
待办公文
</a>
<a class="mui-control-item" href="#item2mobile">
已办公文
</a>
<a class="mui-control-item" href="#item3mobile">
全部公文
</a>
</div>
<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
<div class="mui-slider-group">
<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
第一个选项卡子项-1
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-2
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-3
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-4
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-5
</li>
</ul>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<div class="mui-loading">
<div class="mui-spinner">
<div class="mui-spinner-indicator mui-spinner-indicator12"></div>
<div class="mui-spinner-indicator mui-spinner-indicator11"></div>
<div class="mui-spinner-indicator mui-spinner-indicator10"></div>
<div class="mui-spinner-indicator mui-spinner-indicator9"></div>
<div class="mui-spinner-indicator mui-spinner-indicator8"></div>
<div class="mui-spinner-indicator mui-spinner-indicator7"></div>
<div class="mui-spinner-indicator mui-spinner-indicator6"></div>
<div class="mui-spinner-indicator mui-spinner-indicator5"></div>
<div class="mui-spinner-indicator mui-spinner-indicator4"></div>
<div class="mui-spinner-indicator mui-spinner-indicator3"></div>
<div class="mui-spinner-indicator mui-spinner-indicator2"></div>
<div class="mui-spinner-indicator mui-spinner-indicator1"></div>
</div>
</div>
</div>
<div id="item3mobile" class="mui-slider-item mui-control-content">
<div class="mui-loading">
<div class="mui-spinner">
<div class="mui-spinner-indicator mui-spinner-indicator12"></div>
<div class="mui-spinner-indicator mui-spinner-indicator11"></div>
<div class="mui-spinner-indicator mui-spinner-indicator10"></div>
<div class="mui-spinner-indicator mui-spinner-indicator9"></div>
<div class="mui-spinner-indicator mui-spinner-indicator8"></div>
<div class="mui-spinner-indicator mui-spinner-indicator7"></div>
<div class="mui-spinner-indicator mui-spinner-indicator6"></div>
<div class="mui-spinner-indicator mui-spinner-indicator5"></div>
<div class="mui-spinner-indicator mui-spinner-indicator4"></div>
<div class="mui-spinner-indicator mui-spinner-indicator3"></div>
<div class="mui-spinner-indicator mui-spinner-indicator2"></div>
<div class="mui-spinner-indicator mui-spinner-indicator1"></div>
</div>
</div>
</div>
</div>
</div>

<h5 class="mui-content-padded">Color</h5>
<div class="mui-card">
<form class="mui-input-group">
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-primary" style="display:block;width:25px;height:25px;"></span>
</label>
<input name="radio1" type="radio" checked value="primary">
</div>
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-positive" style="display:block;width:25px;height:25px;"></span>
</label>
<input name="radio1" type="radio" value="positive">
</div>
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-negative" style="display:block;width:25px;height:25px;"></span>
</label>
<input name="radio1" type="radio" value="negative">
</div>
</form>
</div>

2014-11-27 10:53 负责人:无分享

13 个回复

DCloud_UNI_FXY

导致该现象的详细步骤描述一下

AaronC (作者)

就是我在第一页放入了内容设置了区域滚动这类的，然后我现在滑动滑块到第二页的过程中就出现这个问题了

2014-11-27 14:26
AaronC (作者)

需要我贴页面代码吗？

2014-11-27 14:27

AaronC (作者)

补充下如何循环滑动···

DCloud_UNI_FXY

1.选项卡内容使用我们的scroll控件来实现区域滚动。

2.选项卡不建议使用循环，一般图片轮播使用循环还可以，如果选项卡循环的话，需要额外增加两个重复的选项卡节点。而选项卡里的内容是很多的，比较影响性能

AaronC (作者)

SCROLL组件应该加在哪个DIV？我试了下貌似不行

2014-11-27 11:36
DCloud_UNI_FXY

mui-slider-item mui-control-content里边

2014-11-27 11:41
AaronC (作者)

回复 DCloud_UNI_FXY: <div id="item1mobile" class="mui-slider-item mui-control-content mui-active mui-scroll"> 貌似不行啊

2014-11-27 11:43

DCloud_UNI_FXY

html代码

<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">  
                        <div id="scroll" class="mui-content mui-scroll-wrapper">  
                            <div class="mui-scroll">  
                                <ul class="mui-table-view">  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-1  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-2  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-3  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-4  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-5  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-6  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-7  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-8  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-9  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-10  
                                    </li>  
                                </ul>  
                            </div>  
                        </div>  

                    </div>

js代码

mui('#scroll').scroll();

AaronC (作者)

这个代码丢上去什么都不显示了

2014-11-27 11:57
DCloud_UNI_FXY

把你页面代码完整的发上来

2014-11-27 11:59
AaronC (作者)

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>趣机</title>

<script src="../js/mui.min.js"></script>

<link href="../css/mui.min.css" rel="stylesheet"/>

<link rel="stylesheet" href="../css/layout.css" />

<script type="text/javascript" charset="utf-8">

mui.init();

</script>

</head>

<body>

<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" href="#item1mobile">

待办公文

</a>

<a class="mui-control-item" href="#item2mobile">

已办公文

</a>

<a class="mui-control-item" href="#item3mobile">

全部公文

</a>

</div>

<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>

<div class="mui-slider-group">

<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">

<div id="scroll" class="mui-content mui-scroll-wrapper">

<div class="mui-scroll">

<ul class="mui-table-view">

<li class="mui-table-view-cell">

第一个选项卡子项-1

</li>

<li class="mui-table-view-cell">

第一个选项卡子项-2

</li>

<li class="mui-table-view-cell">

第一个选项卡子项-3

</li>

<li class="mui-table-view-cell">

第一个选项卡子项-4

</li>

<li class="mui-table-view-cell">

第一个选项卡子项-5

</li>

</ul>

</div>

</div>

</div>

<div id="item2mobile" class="mui-slider-item mui-control-content">

<div class="mui-loading">

<div class="mui-spinner">

<div class="mui-spinner-indicator mui-spinner-indicator12"></div>

<div class="mui-spinner-indicator mui-spinner-indicator11"></div>

<div class="mui-spinner-indicator mui-spinner-indicator10"></div>

<div class="mui-spinner-indicator mui-spinner-indicator9"></div>

<div class="mui-spinner-indicator mui-spinner-indicator8"></div>

<div class="mui-spinner-indicator mui-spinner-indicator7"></div>

<div class="mui-spinner-indicator mui-spinner-indicator6"></div>

<div class="mui-spinner-indicator mui-spinner-indicator5"></div>

<div class="mui-spinner-indicator mui-spinner-indicator4"></div>

<div class="mui-spinner-indicator mui-spinner-indicator3"></div>

<div class="mui-spinner-indicator mui-spinner-indicator2"></div>

<div class="mui-spinner-indicator mui-spinner-indicator1"></div>

</div>

</div>

</div>

<div id="item3mobile" class="mui-slider-item mui-control-content">

<div class="mui-loading">

<div class="mui-spinner">

<div class="mui-spinner-indicator mui-spinner-indicator12"></div>

<div class="mui-spinner-indicator mui-spinner-indicator11"></div>

<div class="mui-spinner-indicator mui-spinner-indicator10"></div>

<div class="mui-spinner-indicator mui-spinner-indicator9"></div>

<div class="mui-spinner-indicator mui-spinner-indicator8"></div>

<div class="mui-spinner-indicator mui-spinner-indicator7"></div>

<div class="mui-spinner-indicator mui-spinner-indicator6"></div>

<div class="mui-spinner-indicator mui-spinner-indicator5"></div>

<div class="mui-spinner-indicator mui-spinner-indicator4"></div>

<div class="mui-spinner-indicator mui-spinner-indicator3"></div>

<div class="mui-spinner-indicator mui-spinner-indicator2"></div>

<div class="mui-spinner-indicator mui-spinner-indicator1"></div>

</div>

</div>

</div>

</div>

</div>

<script type="text/javascript">

mui.plusReady(function(){

mui('#scroll').scroll();

});

</script>

</body>

</html>

2014-11-27 12:00
AaronC (作者)

@990

2014-11-27 12:12

DCloud_UNI_FXY

使用mui的话，请遵循基本的页面规范，比如设置好
1.<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

所有主体内容请包裹在<div class="mui-content"></div>内

你的页面按上边调整后还有两个问题

1.请把js代码放入mui.ready内。而不是plusReady，plusReady是在用5+api时需要使用的
2.需要自己控制mui-control-content的高度，如果该选项卡是占满整个屏幕的，可以在mui-slider上增加一个mui-fullscreen样式

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <title>趣机</title>  
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
        <script src="../js/mui.min.js"></script>  
        <link href="../css/mui.min.css" rel="stylesheet" />  
        <link rel="stylesheet" href="../css/layout.css" />  
        <script type="text/javascript" charset="utf-8">  
            mui.init();  
        </script>  
    </head>  

    <body>  
        <div class="mui-content">  
            <div id="slider" class="mui-slider mui-fullscreen">  
                <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">  
                    <a class="mui-control-item" href="#item1mobile">  
待办公文  
</a>  
                    <a class="mui-control-item" href="#item2mobile">  
已办公文  
</a>  
                    <a class="mui-control-item" href="#item3mobile">  
全部公文  
</a>  
                </div>  
                <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>  
                <div class="mui-slider-group">  
                    <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">  
                        <div id="scroll" class="mui-content mui-scroll-wrapper">  
                            <div class="mui-scroll">  
                                <ul class="mui-table-view">  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-1  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-2  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-3  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-4  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-5  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-1  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-2  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-3  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-4  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-5  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-1  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-2  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-3  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-4  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-5  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-1  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-2  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-3  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-4  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-5  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-1  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-2  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-3  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-4  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-5  
                                    </li>  
                                </ul>  
                            </div>  
                        </div>  
                    </div>  
                    <div id="item2mobile" class="mui-slider-item mui-control-content">  
                        <div class="mui-loading">  
                            <div class="mui-spinner">  
                                <div class="mui-spinner-indicator mui-spinner-indicator12"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator11"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator10"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator9"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator8"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator7"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator6"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator5"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator4"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator3"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator2"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator1"></div>  
                            </div>  
                        </div>  
                    </div>  
                    <div id="item3mobile" class="mui-slider-item mui-control-content">  
                        <div class="mui-loading">  
                            <div class="mui-spinner">  
                                <div class="mui-spinner-indicator mui-spinner-indicator12"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator11"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator10"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator9"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator8"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator7"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator6"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator5"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator4"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator3"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator2"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator1"></div>  
                            </div>  
                        </div>  
                    </div>  
                </div>  
            </div>  
        </div>  
        <script type="text/javascript">  
            mui.ready(function() {  
                mui('#scroll').scroll();  
            });  
        </script>  
    </body>  

</html>

AaronC (作者)

好的谢谢，如何隐藏这种样式的滚动条和屏蔽页面回弹

2014-11-27 12:19

DCloud_UNI_FXY

初始化scroll时设置indicators:false

mui('#scroll').scroll({indicators:false});

你说的页面回弹是指的整个页面？
5+的webview回弹，通过设置webview的style中的bounce: 'vertical'

AaronC (作者)

貌似显示不完整滚动到最底部还有条没显示

2014-11-27 12:27

AaronC (作者)

            plus.webview.currentWebview().setStyle({  

                bounce: 'vertical'  

            })照样回弹啊

2014-11-27 12:28

AaronC (作者)

回弹说的是选项卡的内容区~

2014-11-27 12:28

DCloud_UNI_FXY

后续版本修复此问题
暂时你可以自己用css修复

.mui-fullscreen .mui-slider-group {  
top: 38px;  
bottom: 0px;  
position: absolute;  
width: 100%;  
}

AaronC (作者)

这貌似没效果哦

2014-11-27 12:49

DCloud_UNI_FXY

mui('#scroll').scroll({  
                    indicators: false,  
                    bounce: false  
                });

DCloud_UNI_FXY

.mui-fullscreen .mui-slider-group {  
                top: 38px;  
                bottom: 0px;  
                position: absolute;  
                width: 100%;  
                height: auto;  
            }

AaronC (作者)

`发现一个问题滑动页面的时候会卡在一半，如附件

AaronC (作者)

卡住不过去了

AaronC (作者)

<!DOCTYPE html>  
<html>  
    <head>  
        <title></title>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
        <script src="../js/mui.min.js"></script>  
        <link href="../css/mui.min.css" rel="stylesheet" />  
        <link rel="stylesheet" href="../css/layout.css" />  
        <script type="text/javascript" charset="utf-8">  
            mui.init();  
        </script>  
    </head>  
<body>  
    <div class="mui-content">  
        <div id="slider" class="mui-slider mui-fullscreen">  
            <div id="sliderSegmentedControl" class="mui-segmented-control mui-segmented-control-inverted">  
                <a class="mui-control-item" href="#item1mobile">精选</a>  
                <a class="mui-control-item" href="#item2mobile">评测</a>  
                <a class="mui-control-item" href="#item3mobile">开测</a>  
                <a class="mui-control-item" href="#item4mobile">开服</a>  
                <a class="mui-control-item" href="#item5mobile">分类</a>  
             </div>  
             <div class="mui-slider-group">  
                   <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">  
                        <div id="scroll" class="mui-content mui-scroll-wrapper">  
                            <div class="mui-scroll">  
                                <!--精选导航-->  
                                <nav class="mui-bar mui-bar-tab mui-bg-white" id="nav-findgame">  
                                    <a class="mui-tab-item mui-bg-pink" href="#"><span>排行</span></a>  
                                    <a class="mui-tab-item mui-bg-blue" href="#"><span>专题</span></a>  
                                    <a class="mui-tab-item mui-bg-yellow" href="#"><span>礼包</span></a>  
                                    <a class="mui-tab-item mui-bg-purple" href="#"><span>论坛</span></a>  
                                </nav>  
                                <!--精选导航end-->  
                                <h4 class="nav-title"><span class="mui-pull-left"></span>最新资讯<a class="mui-pull-right " href="#">更多</a></h4>  
                                <!--资讯列表-->  
                                <ul class="mui-table-view">  
                                    <li class="mui-table-view-cell mui-hidden">cared  
                                        <div id="M_Toggle" class="mui-switch mui-active">  
                                            <div class="mui-switch-handle"></div>  
                                        </div>  
                                    </li>  
                                    <li class="mui-table-view-cell mui-media">  
                                        <a href="#">  
                                            <img class="mui-media-object mui-pull-left" src="http://dcloudio.github.io/mui/assets/img/shuijiao.jpg">  
                                            <div class="mui-media-body">  
                                                幸福  
                                                <p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>  
                                            </div>  
                                        </a>  
                                    </li>  
                                    <li class="mui-table-view-cell mui-media">  
                                        <a href="#">  
                                            <img class="mui-media-object mui-pull-left" src="http://dcloudio.github.io/mui/assets/img/muwu.jpg">  
                                            <div class="mui-media-body">  
                                                木屋  
                                                <p class='mui-ellipsis'>想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>  
                                            </div>  
                                        </a>  
                                    </li>  
                                    <li class="mui-table-view-cell mui-media">  
                                        <a href="#">  
                                            <img class="mui-media-object mui-pull-left" src="http://dcloudio.github.io/mui/assets/img/cbd.jpg">  
                                            <div class="mui-media-body">  
                                                CBD  
                                                <p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>  
                                            </div>  
                                        </a>  
                                    </li>  
                                    <li class="mui-table-view-cell mui-media">  
                                        <a href="#">  
                                            <img class="mui-media-object mui-pull-left" src="http://dcloudio.github.io/mui/assets/img/yuantiao.jpg">  
                                            <div class="mui-media-body">  
                                                远眺  
                                                <p class='mui-ellipsis'>静静的看这个世界，最后终于疯了</p>  
                                            </div>  
                                        </a>  
                                    </li>  
                                </ul>  
                                <!--资讯列表end-->  
                                <!--精品推荐列表-->  
                                <h4 class="nav-title"><span class="mui-pull-left"></span>精品推荐<a class="mui-pull-right " href="#">更多</a></h4>  
                                <ul class="mui-table-view mui-grid-view">  
                                    <li class="mui-table-view-cell mui-media mui-col-xs-6">  
                                        <a href="#">  
                                            <img class="mui-media-object" src="http://dcloudio.github.io/mui/assets/img/shuijiao.jpg">  
                                            <div class="mui-media-body">幸福就是可以一起睡觉</div>  
                                        </a>  
                                    </li>  
                                    <li class="mui-table-view-cell mui-media mui-col-xs-6">  
                                        <a href="#">  
                                            <img class="mui-media-object" src="http://dcloudio.github.io/mui/assets/img/muwu.jpg">  
                                            <div class="mui-media-body">想要一间这样的木屋，静静的喝咖啡</div>  
                                        </a>  
                                    </li>  
                                    <li class="mui-table-view-cell mui-media mui-col-xs-6">  
                                        <a href="#">  
                                            <img class="mui-media-object" src="http://dcloudio.github.io/mui/assets/img/cbd.jpg">  
                                            <div class="mui-media-body">Color of SIP CBD</div>  
                                        </a>  
                                    </li>  
                                    <li class="mui-table-view-cell mui-media mui-col-xs-6">  
                                        <a href="#">  
                                            <img class="mui-media-object" src="http://dcloudio.github.io/mui/assets/img/yuantiao.jpg">  
                                            <div class="mui-media-body">静静看这世界</div>  
                                        </a>  
                                    </li>  
                                        <li class="mui-table-view-cell mui-media mui-col-xs-6">  
                                        <a href="#">  
                                            <img class="mui-media-object" src="http://dcloudio.github.io/mui/assets/img/yuantiao.jpg">  
                                            <div class="mui-media-body">静静看这世界</div>  
                                        </a>  
                                    </li>  
                                        <li class="mui-table-view-cell mui-media mui-col-xs-6">  
                                        <a href="#">  
                                            <img class="mui-media-object" src="http://dcloudio.github.io/mui/assets/img/yuantiao.jpg">  
                                            <div class="mui-media-body">静静看这世界</div>  
                                        </a>  
                                    </li>  
                                </ul>  
                                <!--精品推荐列表end-->  
                            </div>  
                        </div>  
                    </div>  
                    <div id="item2mobile" class="mui-slider-item mui-control-content">  
                        <div class="mui-loading">  
                            <div class="mui-spinner">  
                                <div class="mui-spinner-indicator mui-spinner-indicator12"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator11"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator10"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator9"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator8"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator7"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator6"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator5"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator4"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator3"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator2"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator1"></div>  
                            </div>  
                        </div>  
                    </div>  
                    <div id="item3mobile" class="mui-slider-item mui-control-content">  
                        <div class="mui-loading">  
                            <div class="mui-spinner">  
                                <div class="mui-spinner-indicator mui-spinner-indicator12"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator11"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator10"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator9"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator8"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator7"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator6"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator5"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator4"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator3"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator2"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator1"></div>  
                            </div>  
                        </div>  
                    </div>  
                    <div id="item4mobile" class="mui-slider-item mui-control-content">  
                        <div class="mui-loading">  
                            <div class="mui-spinner">  
                                <div class="mui-spinner-indicator mui-spinner-indicator12"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator11"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator10"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator9"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator8"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator7"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator6"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator5"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator4"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator3"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator2"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator1"></div>  
                            </div>  
                        </div>  
                    </div>  
                    <div id="item5mobile" class="mui-slider-item mui-control-content">  
                        <div class="mui-loading">  
                            <div class="mui-spinner">  
                                <div class="mui-spinner-indicator mui-spinner-indicator12"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator11"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator10"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator9"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator8"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator7"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator6"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator5"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator4"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator3"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator2"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator1"></div>  
                            </div>  
                        </div>  
                    </div>                      
                </div>  
            </div>  
        </div>  
<style type="text/css">  
.mui-fullscreen .mui-slider-group {top: 38px;bottom: 0px;position: absolute;width: 100%;height: auto;}  
.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{color:orange;}  
.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{border-bottom: 2px solid orange;}   
.mui-segmented-control .mui-control-item{padding-top: 10px; padding-bottom: 10px;}  
.mui-segmented-control{border-bottom: 1px solid #CCCCCC;}  
.mui-segmented-control.mui-segmented-control-inverted{border-bottom: 1px solid #CCCCCC;}  
#nav-findgame{position: static; height: 30px;}  
#nav-findgame.mui-bar-tab .mui-tab-item.mui-active{border: none;padding: 0;}  
#nav-findgame.mui-bar-tab .mui-tab-item span{color:#FFFFFF;font-size: 14px;}  
#nav-findgame.mui-bar-tab .mui-tab-item.mui-bg-pink:active{background:#FF7F80;}  
#nav-findgame.mui-bar-tab .mui-tab-item.mui-bg-blue:active{background: #87c3ff;}  
#nav-findgame.mui-bar-tab .mui-tab-item.mui-bg-yellow:active{background: #ffc933;}  
#nav-findgame.mui-bar-tab .mui-tab-item.mui-bg-purple:active{background: #d0a4f3;}  
.nav-title{font-size: 18px;font-weight: normal; background: #FFFFFF; margin: 0; height: 50px; line-height: 50px;}  
.nav-title span{background: orange; width: 3px; height: 20px;margin-left: 10px;margin-top: 16px; margin-right: 6px;}  
.nav-title a{font-size: 13px;background: url(../images/home_icon_arrow.png) no-repeat right center;color:#797979; padding-right: 10px; margin-right: 4px;}  
.nav-title a:active{color:orange;font-weight: bold;}  
</style>   
 <script type="text/javascript">  
    mui.ready(function() {  
        mui('#scroll').scroll({indicators:false, bounce: false});  
    });  
</script>  
</body>  
</html>

DCloud_UNI_FXY

下个版本正式修复此问题

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

如下代码如何加入单页滚动互不影响

13 个回复

公告

相关问题

如下代码如何加入单页滚动互不影响

与内容相关的链接

13 个回复

公告

相关问题