【报Bug】mui 横向滚动嵌套

分类：MUI

详细问题描述
嵌套时子滚动区域在手机屏幕无效,

附件
[代码片段]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="css/mui.css" rel="stylesheet"/>
<link href="css/icon-extra.css" rel="stylesheet"/>
<style type="text/css">
.mui-search{
color: white;
font-weight: bold;
}
.mui-icon-search{
color: white;
}
.mui-icon-weixin{
color:white;
}
.icon-cart3{
color:white;
}
.mui-icon-extra-custom{
line-height: 1.6;
}
html,
body {
background-color: #efeff4;
}

        .mui-bar~.mui-content .mui-fullscreen {  
            top: 44px;  
            height: auto;  
        }  

        .mui-pull-top-tips {  
            position: absolute;  
            top: -20px;  
            left: 50%;  
            margin-left: -25px;  
            width: 40px;  
            height: 40px;  
            border-radius: 100%;  
            z-index: 1;  
        }  

        .mui-bar~.mui-pull-top-tips {  
            top: 24px;  
        }  

        .mui-pull-top-wrapper {  
            width: 42px;  
            height: 42px;  
            display: block;  
            text-align: center;  
            background-color: #efeff4;  
            border: 1px solid #ddd;  
            border-radius: 25px;  
            background-clip: padding-box;  
            box-shadow: 0 4px 10px #bbb;  
            overflow: hidden;  
        }  

        .mui-pull-top-tips.mui-transitioning {  
            -webkit-transition-duration: 200ms;  
            transition-duration: 200ms;  
        }  

        .mui-pull-top-tips .mui-pull-loading {  
            /*-webkit-backface-visibility: hidden;  
            -webkit-transition-duration: 400ms;  
            transition-duration: 400ms;*/  
            margin: 0;  
        }  

        .mui-pull-top-wrapper .mui-icon,  
        .mui-pull-top-wrapper .mui-spinner {  
            margin-top: 7px;  
        }  

        .mui-pull-top-wrapper .mui-icon.mui-reverse {  
            /*-webkit-transform: rotate(180deg) translateZ(0);*/  
        }  

        .mui-pull-bottom-tips {  
            text-align: center;  
            background-color: #efeff4;  
            font-size: 15px;  
            line-height: 40px;  
            color: #777;  
        }  

        .mui-pull-top-canvas {  
            overflow: hidden;  
            background-color: #fafafa;  
            border-radius: 40px;  
            box-shadow: 0 4px 10px #bbb;  
            width: 40px;  
            height: 40px;  
            margin: 0 auto;  
        }  

        .mui-pull-top-canvas canvas {  
            width: 40px;  
        }  

        .mui-slider-indicator.mui-segmented-control {  
            background-color: #efeff4;  
        }  
        .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {  
            color: rgba(255,111,0,.9);  
        }  
        .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {  
            background-color: rgba(255,111,0,.9);  
        }  
</style>

</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">
item1
</a>
<a class="mui-control-item" href="#item2mobile">
item2
</a>
<a class="mui-control-item" href="#item3mobile">
item3 <span class="mui-badge mui-badge-danger" style="position: absolute;margin-top: 9px;">4</span>
</a>
<a class="mui-control-item" href="#item4mobile">
item4
</a>
</div>
<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-3"></div>
<div class="mui-slider-group">
<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
<div id="scroll1" class="mui-scroll-wrapper pullrefresh">
<div class="mui-scroll">
<div id="slider_top" class="mui-slider" id="cu" style="height:100px;">
<div class="mui-slider-group mui-slider-loop">
<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="image/9.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="image/1.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="image/2.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="image/3.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="image/4.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="image/5.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="image/6.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="image/7.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="image/8.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="image/9.jpg" /></a></div>
<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="image/1.jpg" /></a></div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
<div class="mui-row">
<div class="mui-col-sm-3 mui-col-xs-3">
<li class="mui-table-view-cell">
<a>
aaa
</a>
</li>
</div>
<div class="mui-col-sm-3 mui-col-xs-3">
<li class="mui-table-view-cell">
<a>
bbb
</a>
</li>
</div>
<div class="mui-col-sm-3 mui-col-xs-3">
<li class="mui-table-view-cell">
<a>
ccc
</a>
</li>
</div>
<div class="mui-col-sm-3 mui-col-xs-3">
<li class="mui-table-view-cell">
<a>
ddd
</a>
</li>
</div>
<div class="mui-col-sm-3 mui-col-xs-3">
<li class="mui-table-view-cell">
<a>
eee
</a>
</li>
</div>
<div class="mui-col-sm-3 mui-col-xs-3">
<li class="mui-table-view-cell">
<a>
fff
</a>
</li>
</div>
<div class="mui-col-sm-3 mui-col-xs-3">
<li class="mui-table-view-cell">
<a>
ggg
</a>
</li>
</div>
<div class="mui-col-sm-3 mui-col-xs-3">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
hhh
</a>
</li>
</div>
</div>
<ul class="mui-table-view">
<div 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">
推荐
</a>
<a class="mui-control-item">
热点
</a>
<a class="mui-control-item">
北京
</a>
<a class="mui-control-item">
社会
</a>
<a class="mui-control-item">
娱乐
</a>
<a class="mui-control-item">
科技
</a>
<a class="mui-control-item">
热点
</a>
<a class="mui-control-item">
北京
</a>
<a class="mui-control-item">
社会
</a>
<a class="mui-control-item">
娱乐
</a>
<a class="mui-control-item">
科技
</a>
</div>
</div>
</ul>
</div>
</div>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<div id="scroll2" class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="mui-loading">
<div class="mui-spinner">
</div>
</div>
</div>
</div>
</div>
<div id="item3mobile" class="mui-slider-item mui-control-content">
<div id="scroll3" class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="mui-loading">
<div class="mui-spinner">
</div>
</div>
</div>
</div>
</div>
<div id="item4mobile" class="mui-slider-item mui-control-content">
<div id="scroll4" class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="mui-loading">
<div class="mui-spinner">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script>
mui.init({
swipeBack: true,
keyEventBind: {
backbutton: false //关闭back按键监听
},
pullRefresh: {
container: '.pullrefresh',
up: {
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});
mui.ready(function() {
mui('.test.mui-scroll-wrapper').scroll({
bounce: true,
indicators: true,
deceleration:mui.os.ios?0.003:0.0009
});
mui('.mui-scroll').on('tap','.mui-control-item:not(.mui-active)',function(){
mui('.mui-slider').slider().gotoItem(this.getAttribute('data-index'));
});
});
var count = 0;
/**

上拉加载具体业务实现
*/
function pullupRefresh() {
setTimeout(function() {
mui('.pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for(var i = cells.length, len = i + 20; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">推荐-Item ' + (i + 1) + '</a>';
table.appendChild(li);
}
}, 1000);
}
(function($) {
$('.mui-scroll-wrapper').scroll({
indicators: true //是否显示滚动条
});
var html2 = '<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>';
var html3 = '<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>';
var item2 = document.getElementById('item2mobile');
var item3 = document.getElementById('item3mobile');
document.getElementById('slider').addEventListener('slide', function(e) {
if (e.detail.slideNumber === 1) {
if (item2.querySelector('.mui-loading')) {
setTimeout(function() {
item2.querySelector('.mui-scroll').innerHTML = html2;
}, 500);
}
} else if (e.detail.slideNumber === 2) {
if (item3.querySelector('.mui-loading')) {
setTimeout(function() {
item3.querySelector('.mui-scroll').innerHTML = html3;
}, 500);
}
}
});
$('.test.mui-scroll-wrapper1.mui-slider-indicator.mui-segmented-control').scroll({
scrollY: false,
scrollX: true,
indicators: true,
snap: '.mui-control-item'
});
})(mui);
//获得slider插件对象
var gallery = mui('#slider_top');
gallery.slider({
interval:3000//自动轮播周期，若为0则不自动播放，默认为0；
});
</script>
</body>
</html>

2018-06-25 15:48 负责人:无分享

2 个回复

蒋汶材

建了一个微信群，希望大家一起进来交流技术问题，官方人员进群后请联系我转让该群

l***@163.com (作者) - 初出茅庐

写点想法,最近看了看MUI,试着写一些APP布局,我认为现在最难的就是布局(模仿客户要求的特殊效果),后台接口RESTAPI如果无特殊要求就很容易实现,尤其使用YII2或Laravel的scaffold;前台布局遇到问题后在论坛发了问题,可是回复的结果让人烦,基本是无回复或无用,在群里认识了几个朋友,让翻墙出去看看国外的同类产品论坛,结果碰到了福音, 我遇到的问题国外的大牛瞬间给回复,一般本人晚上加班,国外也是白天,如果大家对(类似的)混合式开发问题还有未解决的就研究下国外的相似的项目,会获得意外收获,毕竟殊途同归.不要一棵树上DS. 另外希望MUI提升用户社区的体验.

w***@126.com

请问在横向滚动区域竖向滚动时，整个屏幕的竖向滚动失效有解决办法吗，帖子回复不及时，方便的话加我微信w_wangyun 不胜感激

2019-03-18 15:08

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

【报Bug】mui 横向滚动嵌套

2 个回复

公告

相关问题

【报Bug】mui 横向滚动嵌套

与内容相关的链接

2 个回复

公告

相关问题