dom结构:
使用mui区域滚动,把需要滚动的内容放在其中
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<!--这里放置真实显示的DOM内容-->
</div>
</div>
初始化加载滚动条:
mui('#mui-scroll').scroll({
scrollY: true, //是否竖向滚动
scrollX: false, //是否横向滚动
startX: 0, //初始化时滚动至x
startY: 0, //初始化时滚动至y
indicators: true, //是否显示滚动条
deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
bounce: true //是否启用回弹
});
主要功能:
1、 所有项均可以展开与折叠,展开内容高度自适应
2、点击当前项时,折叠展开的兄弟项,同时,兄弟项的箭头向下
3、若在当前项之前有兄弟项展开,则之前兄弟项展开内容隐藏,当前项向上滚动高度为隐藏内容的高度;
4、若在当前项之后有兄弟项展开,则之后兄弟项展开内容隐藏,当前项位置不变;
实际问题:
1、有兄弟项展开时,点击当前项,当前项展示内容自动定位到上次滚动的位置,没有回弹到当前项
原因:
1、有兄弟项展开时,mui记录了滚动条的位置,点击当前项时,当前项的位置就是滚动条记录的位置,所以需要重新定位滚动条的位置,才能回弹到合适的位置
解决方法:
1、找到之前兄弟项中展开的项
2、获取滚动条定位scroll_y
3、获取展开内容的高度visibleSibH
4、重新定位的new_y值(new_y=scroll_y+visibleSibH),注意:new_y的值可能大于0,此时需要设置new_y=0
// 上下箭头tap事件
mui("#mui-scroll").on('tap', '.bus_bottom', function() {
var $self = $(this);
var $obj_next = $self.next();
// 内容显示与隐藏,箭头变化
if ($obj_next.hasClass("mui-hidden")) { //显示
// 点击当前项时,兄弟项折叠,
// --如果之前兄弟项展开,则需要重新定位滚动条;之后兄弟项展开,滚动条不需要重新定位,自动隐藏
// 因此,只需要判断之前兄弟项有没有展开,展开则重新定位滚动条
// 所有兄弟项不管展开与否 ,统一折叠,箭头改变
// 获取当前项之前的兄弟项
var $visiblePrev = $self.parent().prevAll().find("div.bus_detail:visible");
var prevlens = $visiblePrev.length;
if (prevlens > 0) { //之前兄弟项有展开
// --1获取滚动条定位;--2获取可见项的高度;--3重新定位的y值
var scroll_y=mui('#mui-scroll').scroll().y;
var visibleSibH=$visiblePrev.height();
var new_y=scroll_y+visibleSibH;
// 滚动条y值是负数,new_y可能>0,>0时,设置成0
if(new_y>0){
new_y=0;
}
//100毫秒滚动到固定位置
mui('.mui-scroll-wrapper').scroll().scrollTo(0, new_y, 0);
} else { //没有展开
console.log("之前兄弟项没有展开");
}
// --1针对所有兄弟项,获取可见项,隐藏列表
var $sibObj=$self.parent().siblings().find("div.bus_detail:visible");
$sibObj.addClass("mui-hidden");
// --2可见项箭头改变
$sibObj.prev().find("div.bus_bottom_c").removeClass("icon_up").addClass("icon_down");
// 1,当前项箭头变化
$self.find("div.bus_bottom_c").removeClass("icon_down").addClass("icon_up");
// 2,显示列表信息
$obj_next.removeClass("mui-hidden");
// 3,站点集合初始化显示正向路径
$obj_next.find(".list_title_tab").removeClass("lt_active");
$obj_next.find(".list_title_tab:first").addClass("lt_active");
$obj_next.find("div.list_stations").addClass("mui-hidden");
$obj_next.find("div.list_stations:first").removeClass("mui-hidden");
// 4,初始化滑动区域
// mui('.list_stations .mui-scroll-wrapper').scroll({
// deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
// });
// 5,站点列表tab切换事件
mui(".list_title").on('tap', '.list_title_tab', function() {
var $lt_self = $(this);
$lt_self.siblings().removeClass("lt_active");
$lt_self.addClass("lt_active");
var index = $lt_self.index();
// console.log(index);
$lt_self.parent().siblings(".list_stations").addClass("mui-hidden");
$lt_self.parent().siblings(".list_stations").eq(index).removeClass("mui-hidden");
});
} else { //隐藏
$obj_next.addClass("mui-hidden");
$self.find("div.bus_bottom_c").removeClass("icon_up").addClass("icon_down");
}
});