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;//获取滚动距离 })
更多推荐
mui滚动tab切换问题
发布评论