MUI的滾動(dòng)組件scroll與下拉刷新容器如果是同一個(gè)div
以下是刷新容器
mui.init({
pullRefresh: {
container: "#scroll1",
down: {
height: 50,
auto: true,
contentdown: "下拉可以刷新",
contentover: "釋放立即刷新",
contentrefresh: "正在刷新.....",
callback: getNewList
},
up: {
height: 50, //可選.默認(rèn)50.觸發(fā)上拉加載拖動(dòng)距離
auto: false, //可選,默認(rèn)false.自動(dòng)上拉加載一次
contentrefresh: "正在加載...", //可選，正在加載狀態(tài)時(shí)，上拉加載控件上顯示的標(biāo)題內(nèi)容
contentnomore: '沒(méi)有更多數(shù)據(jù)了', //可選，請(qǐng)求完畢若沒(méi)有更多數(shù)據(jù)時(shí)顯示的提醒內(nèi)容；
callback: getListPyPage //必選，刷新函數(shù)，根據(jù)具體業(yè)務(wù)來(lái)編寫(xiě)，比如通過(guò)ajax從服務(wù)器獲取新數(shù)據(jù)；
}
}
});
以下是滾動(dòng)組件，id要和上面的刷新容器對(duì)應(yīng)
<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>
兩個(gè)容器，或者說(shuō)組件，id都是同一個(gè)div的話，當(dāng)滾動(dòng)列表里面的滾動(dòng)項(xiàng)很多時(shí)，會(huì)出現(xiàn)雙滾動(dòng)條的情況，如圖
按照網(wǎng)上的說(shuō)法，是因?yàn)椋琩iv和scroll的滾動(dòng)條同時(shí)出現(xiàn)，解決方法是隱藏掉其中一個(gè)
mui('.mui-scroll-wrapper').scroll({
deceleration: 1, //flick 減速系數(shù)，系數(shù)越大，滾動(dòng)速度越慢，滾動(dòng)距離越小，默認(rèn)值 0.0006
indicators: false //隱藏一條滾動(dòng)條 增大減速系數(shù)。。。
});
但是還有個(gè)bug，快要滾動(dòng)到最底部但還沒(méi)有到底部的時(shí)候，會(huì)直接跳到最底部，而且滑動(dòng)的進(jìn)度和滾動(dòng)條位置不匹配，按照網(wǎng)上的辦法是，將減速系數(shù)修改，改成很大，這樣滾動(dòng)進(jìn)度和滾動(dòng)條位置就匹配了。但是減速系數(shù)很大，用戶體驗(yàn)不好。
經(jīng)過(guò)本人研究，發(fā)現(xiàn)了兩種解決方案可以替代
第一種是設(shè)置css屬性
.mui-scrollbar{
display: none !important;
}
這樣子就把滾動(dòng)條隱藏了，但是是兩個(gè)滾動(dòng)條同時(shí)隱藏，所以在滾動(dòng)的時(shí)候又看不到進(jìn)度,用戶體驗(yàn)也不好
第二種方法是將它的mui-scroll這個(gè)類賦給它里面的ul，將當(dāng)前有mui-scroll類的div的class清空，但是不刪除div，我也不知道為啥就成功了，但是貌似滑動(dòng)系數(shù)會(huì)改變，或者說(shuō)流暢度變了一點(diǎn)點(diǎn)，但是不影響體驗(yàn)。
以下是修改后的代碼
<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>
還有一種方法我還沒(méi)試過(guò)，應(yīng)該是去mui.js文件里面找到刷新容器這個(gè)類，然后去修改樣式，隱藏滾動(dòng)條，因?yàn)樗⑿氯萜鞯臐L動(dòng)，是和列表項(xiàng)對(duì)不上的，所以用戶體驗(yàn)不好的應(yīng)該是刷新容器的滾動(dòng)條，但是網(wǎng)上并沒(méi)有給出隱藏刷新容器滾動(dòng)條的方法，只能自己去mui.js文件里面修改源碼了
