MUI填坑记3-滚动组件与刷新容器之双滚动条解决方案

MUI的滚动组件scroll与下拉刷新容器如果是同一个div
以下是刷新容器

mui.init({
                pullRefresh: {
                    container: "#scroll1",
                    down: {
                        height: 50,
                        auto: true,
                        contentdown: "下拉可以刷新",
                        contentover: "释放立即刷新",
                        contentrefresh: "正在刷新.....",
                        callback: getNewList
                    },
                    up: {
                        height: 50, //可选.默认50.触发上拉加载拖动距离
                        auto: false, //可选,默认false.自动上拉加载一次
                        contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
                        contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
                        callback: getListPyPage //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                    }
                }
            });

以下是滚动组件，id要和上面的刷新容器对应

<div id="scroll1" class="mui-scroll-wrapper">
                            <div class="mui-scroll">
                                <ul class="mui-table-view">
                                    <li class="mui-table-view-cell">
                                        <img src="img/assassins_creed_syndicate_7-wallpaper-1920x1080.jpg" />
                                        <div class="list_content">
                                            asdfasdfsdaf
                                        </div>
                                        <div class="list_footer">
                                            <div class="dormitory">
                                                asdfsdf
                                            </div>
                                            <div class="time">
                                                sadfsd
                                            </div>
                                        </div>
                                    </li>

两个容器，或者说组件，id都是同一个div的话，当滚动列表里面的滚动项很多时，会出现双滚动条的情况，如图

asdafsdf.png

按照网上的说法，是因为，div和scroll的滚动条同时出现，解决方法是隐藏掉其中一个

mui('.mui-scroll-wrapper').scroll({
                    deceleration: 1, //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值 0.0006 
                indicators: false //隐藏一条滚动条 增大减速系数。。。
                });

但是还有个bug，快要滚动到最底部但还没有到底部的时候，会直接跳到最底部，而且滑动的进度和滚动条位置不匹配，按照网上的办法是，将减速系数修改，改成很大，这样滚动进度和滚动条位置就匹配了。但是减速系数很大，用户体验不好。

经过本人研究，发现了两种解决方案可以替代

第一种是设置css属性

.mui-scrollbar{
                display: none !important;
            }

这样子就把滚动条隐藏了，但是是两个滚动条同时隐藏，所以在滚动的时候又看不到进度,用户体验也不好

第二种方法是将它的mui-scroll这个类赋给它里面的ul，将当前有mui-scroll类的div的class清空，但是不删除div，我也不知道为啥就成功了，但是貌似滑动系数会改变，或者说流畅度变了一点点，但是不影响体验。
以下是修改后的代码

<div id="scroll1" class="mui-scroll-wrapper">
                            <div>
                                <ul class="mui-table-view mui-scroll ">
                                    <li class="mui-table-view-cell">
                                        <img src="img/assassins_creed_syndicate_7-wallpaper-1920x1080.jpg" />
                                        <div class="list_content">
                                            asdfasdfsdaf
                                        </div>
                                        <div class="list_footer">
                                            <div class="dormitory">
                                                sadfsad
                                            </div>
                                            <div class="time">
                                                asdfsadf
                                            </div>
                                        </div>
                                    </li>
                              </ul>
                          </div>
</div>

还有一种方法我还没试过，应该是去mui.js文件里面找到刷新容器这个类，然后去修改样式，隐藏滚动条，因为刷新容器的滚动，是和列表项对不上的，所以用户体验不好的应该是刷新容器的滚动条，但是网上并没有给出隐藏刷新容器滚动条的方法，只能自己去mui.js文件里面修改源码了