uniapp is a small program to realize the tab function

uniapp is a small program to realize the tab function

1. The category list at the top, scroll-view label

(1) Remove the scroll bar

scroll-view ::-webkit-scrollbar { 
    width: 0; 
    height: 0; color: 
    transparent; 
    display: none;
}
::  
 

2. The list is completed using the swiper component

 1 swiper-item  scroll-view 
 
  1. Realize that the currently selected tab is displayed in the visible area
         1 
            getSelectInfo flag  {
            const query = uni.createSelectorQuery().in(this);
    	    query.select('.uni-tab-item-title-active').boundingClientRect(data => { 
    	        console.log(data)
    	    })
            }
    
         (2)  
         if(this.tabIndex > e) {
    	setTimeout(() => {
    		that.getSelectInfo(true)
    	    },100)
    	} else {
    	setTimeout(() => {
    		that.getSelectInfo(false)
    	    },100)
    	}
    	 scroll-view  
    	this.scrollLeftT = this.scrolLeft
    	(3 scorll-view  
    	getSelectInfo(n) {
    		let that = this;
    		const query = uni.createSelectorQuery().in(this);
    		query.select('.uni-tab-item-title-active').boundingClientRect(data => {
    		  if(n) {
    			  that.scrolLeft -= (data.width+34)
    			  console.log(that.scrolLeft);
    		  }else {
    			  that.scrolLeft += (data.width+34)
    			  console.log(that.scrolLeft);
    		  }
    		}).exec();
    	}
         4   
            if(this.tabIndex > e) {
    		setTimeout(() => {
    			that.getSelectInfo(true)
    		  },100)
    		} else {
    		setTimeout(() => {
    			that.getSelectInfo(false)
    		  },100)
    		}
    		 scroll-view      =  
    		this.scrolLeft = this.scrollLeftT
    	
    	 5  scroll-view  
    	   scroll(e) {
    		 if(e) 
    		this.scrollLeftT = e.detail.scrollLeft
    	   },
    	   
    	  6    
    	 getSelectInfo(n) {
    			let that = this;
    			const query = uni.createSelectorQuery().in(this);
    			query.select('.uni-tab-item-title-active').boundingClientRect(data => {
    			  if(n) {
    				  that.scrolLeft -= (data.width+34)
    				  console.log(that.scrolLeft);
    				  if(data.left > 300) {
    					  that.scrolLeft = that.scrolLeft+200
    				  }
    				  console.log(data);
    			  }else {
    				  that.scrolLeft += (data.width+34)
    				  console.log(that.scrolLeft);
    				  if(data.left <100) {
    				  		that.scrolLeft = that.scrolLeft-200
    				  }
    				  console.log(data);
    			  }
    			}).exec();
    		}