解决MUI在安卓手机上无法滚动的问题

这个问题,只在安卓手机存在,苹果手机是可以滚动的。

一、解决方案

原先的布局:

 

<!-- 中间区域 -->
<div class="mui-content" id="main">

	<!-- 轮播图 -->
	<!-- BANNER -->
    <section class="swiper-container">
        <div class="swiper-wrapper">           
            <div class="swiper-slide"><img src="../../images/banner/banner1.png"/></div>
            <div class="swiper-slide"><img src="../../images/banner/banner2.png"/></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </section>
	<!-- 轮播图 -->
	

</div>
<!-- 中间区域 -->	

最外层,是由.mui-content,作为容器包裹着。

解决:

<!-- 中间区域 -->
<div class="mui-content mui-scroll-wrapper" id="main">

	<div class="mui-scroll">
		
	<!-- 轮播图 -->
	<!-- BANNER -->
    <section class="swiper-container">
        <div class="swiper-wrapper">          
            <div class="swiper-slide"><img src="images/banner/banner1.png"/></div>
            <div class="swiper-slide"><img src="images/banner/banner2.png"/></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </section>
	<!-- 轮播图 -->

    </div>

</div>

JS:

mui.ready(function() {
	
	//->初始化SWIPER
    let swiper1 = new Swiper('.swiper-container', {
        direction: 'horizontal',
        loop: true, /*无缝滚动 */
        autoplay: 3000, /** 3000毫秒实现一次自动轮播 **/
        //如果需要分页器
        pagination: '.swiper-pagination'
    });
    
    //->解决安卓手机无法滚动
    mui(".mui-scroll-wrapper").scroll({
        //bounce: false,//滚动条是否有弹力默认是true
        //indicators: false, //是否显示滚动条,默认是true
    }); 
	
	//->点击链接
	mui("body").on("tap", "a", function() {
		document.location.href = this.href;
	});
});

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值