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

问题描述:

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

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

    

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


    解决:

    页面中引用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实例的操作都放在了请求二级分类列表接口的成功回调里处理了。