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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_25354709/article/details/84586643

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

一、解决方案

原先的布局：

<!-- 中间区域 -->
<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;
	});
});