一.实现tab切换调用,使用插件TABS,此插件使用了Stylus预处理
问题:1.需要下载 Stylus
2.tabs.vue里的bus.$emit需要注释掉
3.当滑动到最后一个tabpanel时标题底部会出现滚动条,解决方式在App添加此代码:
div::-webkit-scrollbar {
display: none;
}二.实现Tab滚动固定,使用uniapp自带的onPageScroll()生命周期,监听滚动位置
问题:onPageScroll生命周期是监听整页面的滚动才生效,局部滚动不生效
onPageScroll(e) { if(e.scrollTop>=100){ this.controller=true; } else{ this.controller=false; } },
三.实现Tab中的内容滚动,必要条件需要设置外部盒子固定高度
//设置active类当controller为true时则实现在指定位置固定 <Tabs id="tabss " :class="controller?'active':''" :TabList="TabList" :currentTab="current" @tabs="tabsChange"> <TabPane style="overflow: scroll;height:700rpx;"> <view class="contentZ " style="height:1200rpx;"> </view> </TabPane> </Tabs> <script> export default{ data(){ return{ //设置几个tab展示 TabList:['first','second','third'], //默认选中第几个下标 current:0, } }, methods:{ //监听Tabs切换 tabsChange(index){ this.current = index }, } } </script> <style> .active{ position:fixed; top: 530rpx; left: 0; } </style>
uniApp实现Tab切换,及监听滚动设置Tab固定,Tab内容可滚动
最新推荐文章于 2024-06-26 16:00:37 发布