mui滚动tab切换问题

mui滚动tab切换问题"/>

mui滚动tab切换问题

根据ui设计图

中间有需要做左右滑动tab切换的问题，选择用mui里的滑动tab切换组件来做这部分的效果，但是相应地也产生了一系列的问题。

滚动内容部分需要用mui-scroll-wrapper>mui-scroll这样的结构包裹起来，如果直接在.mui-slider-item里面放内容，在上下滑动的时候会容易飘而滚向下一个tab内容，但是加了mui-scroll-wrapper>mui-scroll这样的外壳结构，在上下滑动.mui-slider-item内容时又无法让整个页面向上或者向下滚动，所以最后就是左右为难，不过后来我尝试将mui-scroll-wrapper>mui-scroll这个结构放在body上，即给body标签加上mui-scroll-wrapper，给mui-content加上mui-scroll，然后发现tab内容在上下滚动时没有飘了，不过在上下滚动时还出现了原生滚动条会干扰到页面的滚动，所以给html加上了overflow:hidden;这样的样式，

另外

.body.mui-fullscreen {position: relative;/*height: 1200px;*/
}
.body .mui-fullscreen .mui-segmented-control~.mui-slider-group {position: relative;top: 0;
}

这是为了让tab内容高度能够自适应地撑开页面。

至此，这个关于tab滚动切换的bug是暂时解决了，不过总感觉还是不够完美，另外，关于mui的滚动插件呢还有一些问题，比如滚动区域里包裹另一个滚动区域时，这个内容区域就无法滚动了，这个问题也是尚待解决的，希望能找到合适的方案。

mui区域滚动时获取滚动距离：

document.querySelector('.mui-scroll-wrapper' ).addEventListener('scroll', function (e) {var scollH = e.detail.y;//获取滚动距离
})