网上查了半天就没有说明白的,官方文档也是言语不详,但是有点用。
首先:在mui做手机app的时候,自己通过overflow:auto;然后固定宽高去展示滚动条是不好使的,只能用它提供的这种滚动方法。
官方例子
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<!--这里放置真实显示的DOM内容-->
</div>
</div>
options = {
scrollY: true, //是否竖向滚动
scrollX: true, //是否横向滚动
startX: 0, //初始化时滚动至x
startY: 0, //初始化时滚动至y
indicators: true, //是否显示滚动条
deceleration:0.0006, //阻尼系数,系数越小滑动越灵敏
bounce: true //是否启用回弹
}
然后就会出现一个问题:说好的 scrollX: ture以后,横向为啥不滚动呢。明明内容宽度肯定大于这个容器了。
经过我多次测试发现,mui-scroll的宽度如果等于内部容器宽度的话,横向滚动就实现了。所以当图片加载完成之后,我用Js获取了一下内容的宽度,赋值给mui-scroll的宽度,实现了横向和纵向滚动,虽然不能斜着滑动,但是基本功能是实现了。
总结:
1,加载时设置横向可滚动
mui('.mui-scroll-wrapper').scroll({
scrollY: true, //是否竖向滚动
scrollX: true, //是否横向滚动
bounce: false //是否启用回弹
});
2,让class为mui-scroll的容器宽度等于内部内容的宽度。实现横向纵向均可滚动。
完。
ps:顺带提一句
自带的mui-slider-indicatorcode
mui-segmented-control
mui-segmented-control-inverted可以横向,但是不能纵向滚动,而且高度有样式限制,除非是正好合适的需求,不然用起来会很费劲。