seaf2
seaf2
  • 发布:2015-12-25 15:51
  • 更新:2019-04-25 16:25
  • 阅读:11203

MUI图片轮播不流畅,建议更换为swiper组件

分类:MUI

查看了MUI的手机浏览器版的图片轮播效果,总有一种拖泥带水的感觉,远不如SUI的切换效果:http://m.sui.taobao.org/demos/swiper/
它的效果非常流畅利索,用的是swiper组件,建议官方把轮播代码更换这个组件:http://www.idangero.us/swiper/

2015-12-25 15:51 负责人:无 分享
已邀请:
seaf2

seaf2 (作者)

MUI标签页滑动切换也有拖沓的感觉,总觉得滑的时候不够灵敏,其实这个功能我觉得也可以用swiper来替换,切换的时候加个回调函数,改变标签的样式即可

seaf2

seaf2 (作者)

可能官方觉得改代码太麻烦,其实完全可以通过加载额外的swiper组件来完成。
以官方的hellomui手机浏览器版为例
1、head部分插入:

<link rel="stylesheet" href="../css/swiper.css">  
<style>  
.swiper-container {  
    width: 100%;  
}  
.swiper-container img{  
	width:100%;  
	height:auto;  
}  
</style>

2、再将 <div id="slider" class="mui-slider" >...</div> 替换为:

<div class="swiper-container">  
    <div class="swiper-wrapper">  
        <!-- Slides -->  
        <div class="swiper-slide">  
	        <a href="#">  
				<img src="../images/yuantiao.jpg">  
			</a>  
        </div>  
        <div class="swiper-slide">  
	        <a href="#">  
				<img src="../images/shuijiao.jpg">  
			</a>  
        </div>  
        <div class="swiper-slide">  
	        <a href="#">  
				<img src="../images/muwu.jpg">  
			</a>  
        </div>  
        <div class="swiper-slide">  
	        <a href="#">  
				<img src="../images/cbd.jpg">  
			</a>  
        </div>  
    </div>  
</div>

3、在 <script src="../js/mui.js"></script> 后面加上 <script src="../js/swiper.min.js"></script>
然后

var mySwiper = new Swiper ('.swiper-container', {  
    loop: true,  
}) 

就可以了

  • season

    swiper 与mui 侧滑好像不兼容?


    2016-03-07 15:59

1***@qq.com

1***@qq.com

我想问,在同一个页面再增加一个

var mySwiper = new Swiper ('.swiper-container2', {  
    loop: true,  
}) ;

为什么不行

gadget2k

gadget2k

mark下,回头试试看。

9***@qq.com

9***@qq.com - 前端老菜鸟

指示点不流畅就算了,为毛最后一张图片一闪就切换下一张了?

  • 4***@qq.com

    2333 我TM还以为哪的js冲突出现bug了


    2018-12-05 15:41

  • Hb传道者

    哈哈哈哈


    2019-01-28 02:04

小明子

小明子

mui很多插件都不是很好用,可以找第三方插件,在github上面搜索,最近使用腾讯的滑动插件,全部替换mui的滑动了,很好用,叫alloytouch

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