继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

关于mui滚动问题

GLory丶御邪
关注TA
已关注
手记 1
粉丝 0
获赞 2

 大家都知道mui是禁止使用overflow: scroll;在真机上滚动的,看了很多网上方法 大部分都是使用如下的方法

    <div class="mui-content  mui-scroll-wrapper mui-off-canvas-backdrop" >
        <div class="mui-scroll restaurant ">
        </div>
    </div>

加上如下的js:
    mui('.mui-scroll-wrapper').scroll({ deceleration: 0.0005  });
但是这种方法真的好用吗,事实当然是不一定的,因为这种方法很多网友总结了一下,就是必须在mui-scroll下面一层才会起作用。但是大部分我们的项目可能只能一个弹框或者很多div包裹的一个小列表需要滚动,难道每个小列表下面都加两个mui-scroll-wrapper,mui-scroll 的div吗?当然,答案是否定的,
    首先:这两个class都自带样式,莫名加在我们的列表上面很大影响布局(深有体会)那怎么办呢,经过多次尝试终于找到一种方法,不知道通用不 ,反正我的项目没问题。下面是我的方法。

https://img3.mukewang.com/5c9392b400013e7804180696.jpgspacer.gif我是想让整个小列表滚动,当我使用网上的也就是上边的方法,发现他总会作用于整个屏幕,或者临近他的div
最后我在我的这个小列表下面边多加了一层这个div
    <div class="check-list" id="pullrefresh">
        <div class="mui-content">这是需要滚动的列表</div>
    </div>

然后加上一小段js:
    mui('#pullrefresh').scroll({ deceleration: 0.0005 });
这样发现竟然可以了,当然最上边我也是加了.mui-scroll-wrapper'的毕竟他是滑动的容器,只不过这种方法可以准确作用到你想滚动的盒子哪里了,不然总会作用他下面第一个,这就很难受。




打开App,阅读手记
2人推荐
发表评论
随时随地看视频慕课网APP

热门评论

必须登陆进来给你点个赞! 我换id就可以了,或者把 .mui-s-w前面的点 . 给去掉 多谢多谢!😘

查看全部评论