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的话,当滚动列表里面的滚动项很多时,会出现双滚动条的情况,如图
按照网上的说法,是因为,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文件里面修改源码了