uniApp实现Tab切换，及监听滚动设置Tab固定，Tab内容可滚动

 

一.实现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>