解决移动端--微信公众号--项目中 【Android机横向滚动不灵敏】

本文介绍了一种在Android设备上解决列表横向滚动不流畅的方法,通过引入iScroll.js并结合Vue进行动态渲染,实现了平滑的滚动效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题描述:

    项目中有两行列表需要横向滚动以查看更多,默认使用外层元素overflow-x:auto;overflow-y:hidden;定宽来实现,IOS端表现良好,Android端表现很差,经常横向滑动没反应。为了解决Android端这个问题,,特意研究了一下,在此做个记录。

    bug:红色框为 横向滚动容器,在里面实现横向滚动。

    

                        


    解决:

    页面中引用iScroll.js; 版本是5.1.3

                    myScroll1 = new IScroll('#list1', {
                        mouseWheel: true,
                        scrollbars: false,
                        scrollX: true,
                        scrollY:false,
                        click:true
                    });
                    myScroll2 = new IScroll('#list2', {
                        mouseWheel: true,
                        scrollbars: false,
                        scrollX: true,
                        scrollY:false,
                        click:true

                    });

    由于页面是用Vue作渲染的,并且在切换一级分类的时候,二级分类有可能是无,这样会导致引用插件定制的滚动失效,所以我将new Iscroll实例的操作都放在了请求二级分类列表接口的成功回调里处理了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值