rtim/components/n-tabs/n-tabs.vue

<template>
  <view class="tabs">
    <scroll-view  ref="tabbar1" id="tab-bar" class="tab-bar" :scroll="false" :scroll-x="false" :show-scrollbar="false" :scroll-into-view="scrollInto">
		  <view class="tabBox">
			<view class="es x-c" style="width:100%;flex-direction:row;min-height: 40px;">
			  <view class="uni-tab-item" v-for="(tab,index) in tabs"  :key="tab.id" :id="tab.id" :ref="'tabitem'+index"
				:data-id="index" :data-current="index" @click="ontabtap">
				  <text class="uni-tab-item-title" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
				  <view  v-if="tabIndex==index" class="tab-active-line" :style="{ left: 39 +'px'}" ></view>
			  </view>
			<!-- <view class="es serchItem"  :style="{width:searchWid+'px'}">
			 				  <image class="es es-w-38 es-h-36" src="/static/image/course/new_search.png" @tap="handleSearch"></image>
			 </view> -->
			 <view class="es serchItem">
			 	<image class="es es-w-38 es-h-36" src="/static/image/course/new_search.png" @tap="handleSearch"></image>
			 </view>
			</view>
			
			<view class="scroll-view-indicator" v-if="false">
			   <view ref="underline"  class="scroll-view-underline" :class="isTap ? 'scroll-view-animation':''" :style="{left: indicatorLineLeft + 'px', width: indicatorLineWidth + 'px'}"></view>
			</view>
			
		  </view>
    </scroll-view>

  </view>
</template>

<script>
	
	// #ifdef APP-PLUS
	const dom = weex.requireModule('dom');
	// #endif
	
	export default {
		props: {
			tabs: {
				type: Array,
				default() {
					return []
				}
			},
			value: {
				type: [String, Number],
				default: 0
			},
			fixed: Boolean, // 是否悬浮,默认false
			tabWidth: Number, // 每个tab的宽度,默认不设置值,为flex平均分配; 如果指定宽度,则不使用flex,每个tab居左,超过则水平滑动(单位默认rpx)
			height: {
				type: Number,
				default: 64
			},
			norColor: {
				type: String,
				default: '#333333'
			},
			actColor: {
				type: String,
				default: '#FF5C03'
			},
		},
		data() {
			return {
				tabIndex: 0,
				cacheTab: [],
				scrollInto: "",
				navigateFlag: false,
				indicatorLineLeft: 0,
				indicatorLineWidth: 0,
				isTap: false,
				searchWid:72,
				activeLineCenterLeft: 0, // 下划线居中的 left 位置（px 单位）
				activeLineFixedWidth: 80, // 下划线固定宽度（80rpx = 40px，nvue 用 px 单位）
			}
		},
		mounted() {
			this._lastTabIndex = 0;
			this.swiperWidth = 0;
			this.tabbarWidth = 0;
			this.tabListSize = {};
			this._touchTabIndex = 0;
			this.pageList = [];
			
			setTimeout(e => {
				this.switchTab(this.tabIndex);
				this.selectorQuery();
			}, 200)
			
		},
		onReady() {
		      
		},
		methods: {
				handleSearch() {
					this.$emit('search')
				},
				ontabtap(e) {
					
					  let index = e.target.dataset.current || e.currentTarget.dataset.current;
					  //let offsetIndex = this._touchTabIndex = Math.abs(index - this._lastTabIndex) > 1;
					  this.$emit('change',index)
					  // #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-QQ
					  this.isTap = true;
					  var currentSize = this.tabListSize[index];
					  this.updateIndicator(currentSize.left, currentSize.width);
					  this._touchTabIndex = index;
					  // #endif
					  
					  this.switchTab(index);
				  },
				  onswiperscroll(e) {
					
				  },
				  animationfinish(e) {
						// #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-QQ
						let index = e.detail.current;
						if (this._touchTabIndex === index) {
						  this.isTap = false;
						}
						this._lastTabIndex = index;
						this.switchTab(index);
						this.updateIndicator(this.tabListSize[index].left, this.tabListSize[index].width);
						// #endif
				  },
				  selectorQuery() {
						// #ifdef APP-NVUE
						dom.getComponentRect(this.$refs["tabbar1"], res => {
							this.tabbarWidth = res.size.width;
							
						});
						
						// dom.getComponentRect(this.$refs['swiper1'], res => {
						//    this.swiperWidth = res.size.width;
						//    console.log("qxj swiper res:"+JSON.stringify(res));
						// });
						
						// 因 nvue 暂不支持 class 查询
						var queryTabSize = uni.createSelectorQuery().in(this);
						for (var i = 0; i < this.tabs.length; i++) {
						  queryTabSize.select('#' + this.tabs[i].id).boundingClientRect();
						}
						queryTabSize.exec(rects => {
						   rects.forEach((rect) => {
							   this.tabListSize[rect.dataset.id] = rect;
						   });
						   this.updateIndicator(this.tabListSize[this.tabIndex].left, this.tabListSize[this.tabIndex].width);
						   this.switchTab(this.tabIndex);
						});
						
						
						// #endif
						
					
						// #ifdef MP-WEIXIN || H5 || MP-QQ
						uni.createSelectorQuery().in(this).select('.tab-box').fields({
						  dataset: true,
						  size: true,
						}, (res) => {
						  this.swiperWidth = res.width;
						}).exec();
						uni.createSelectorQuery().in(this).selectAll('.uni-tab-item').boundingClientRect((rects) => {
						  rects.forEach((rect) => {
							this.tabListSize[rect.dataset.id] = rect;
						  })
						  this.updateIndicator(this.tabListSize[this.tabIndex].left, this.tabListSize[this.tabIndex].width);
						}).exec();
						// #endif
				  },
				  getElementSize(dom, ref, id) {
						dom.getComponentRect(ref, res => {
						     this.tabListSize[id] = res.size;
						});
				  },
				  updateIndicator(left, width) {
						let dWidth=26;
						this.searchWid=width;
						this.indicatorLineLeft = left+(width-dWidth)/2.0;
						this.indicatorLineWidth = dWidth;
						
				  },
				  switchTab(index) {
						if (this.tabIndex === index) {
						  return;
						}
						// 缓存 tabId
						this.tabIndex = index;
						// #ifdef APP-NVUE
						   //this.scrollTabTo(index);
						// #endif
						// #ifndef APP-NVUE
						    this.scrollInto = this.tabList[index].id;
						// #endif
				  },
				  scrollTabTo(index) {
						const el = this.$refs['tabitem' + index][0];
						let offset = 0;
						// TODO fix ios offset
						if (index > 0) {
						  offset = this.tabbarWidth / 2 - this.tabListSize[index].width / 2;
						  if (this.tabListSize[index].right < this.tabbarWidth / 2) {
							offset = this.tabListSize[0].width;
						  }
						}
						dom.scrollToElement(el, {
						  offset: -offset
						});
				  },
				  loadTabData(index) {
					
				  },
				  clearTabData(index) {
					
				  }
		    
			    }
		}
	</script>
		
<style>
    /* #ifndef APP-PLUS */
		  page {
				width: 100%;
				min-height: 100%;
				display: flex;
		  }

       /* #endif */
		
		  .tabs {
			  
				flex: 1;
				flex-direction: column;
				overflow: hidden;
				background: transparent;
				/* #ifdef MP-ALIPAY || MP-BAIDU */
				height: 100vh;
				/* #endif */
		  }
		
		  .tab-bar {
				/* #ifdef APP-PLUS */
				width: 750rpx;
				/* #endif */
				height: 42px;
				flex-direction: row;
				/* #ifndef APP-PLUS */
				white-space: nowrap;
				/* #endif */
				background: transparent;
		  }
		
		  .tabBox{
			  flex-direction: column;display: 
			  flex;flex: 1;
			  background: transparent;
			  position: relative;
		  }
		
		  /* #ifndef APP-NVUE */
		  .tab-bar ::-webkit-scrollbar {
		    display: none;
		    width: 0 !important;
		    height: 0 !important;
		    -webkit-appearance: none;
		    background: transparent;
		  }
		
		  /* #endif */
		
		  .scroll-view-indicator {
			position: absolute;
			height: 2px;
			background-color: transparent;
			left: 0;right: 0;
			bottom: 4px;
			/* background-color: transparent; */
		  }
		
		  .scroll-view-underline {
		     position: absolute;
		     top: 0;
		     bottom: 0;
		     width: 0;
		     background-color: #ffffff;
		  }
		
		  .scroll-view-animation {
		    transition-duration: 0.2s;
		    transition-property: left;
		  }
		
		  .tab-bar-line {
		     height: 1px;
		     background-color: #cccccc;
		  }
		
		  .tab-box {
		     flex: 1;
		  }
		
		  .uni-tab-item {
			 /* display: flex;
			  align-items: center;
			  justify-content: center; */
				/* #ifndef APP-PLUS */
				display: inline-block;
				/* #endif */
				flex-wrap: nowrap;
				padding-left: 20px;
				padding-right: 20px;
				 
		  }
		
		  .uni-tab-item-title {
			 position: relative;
				font-weight: 600;
				font-size: 36rpx;
				color: rgba(255,255,255,0.7);
				height: 40px;
				line-height: 40px;
				flex-wrap: nowrap;
				/* #ifndef APP-PLUS */
				white-space: nowrap;
				/* #endif */
		  }
		
		  .uni-tab-item-title-active {
			  font-weight: 600;
			  font-size: 40rpx;
		      color: #ffffff;
		  }
		 .tab-active-line {
			      
		   position: absolute;
		   margin: 0 auto; 
		    bottom: 6rpx;
		    left:0;
		    width: 80rpx;
		    height: 6rpx;
		    background-color: #FFFFFF;
		    border-radius: 3rpx;
		    /* 补充：过渡动画，切换更丝滑 */
		    transition: all 0.2s ease;
		 }

		  .serchItem{
			  padding-left: 20px;
			  padding-right: 20px;
			  height: 40px;
			  line-height: 40px;
			  position: absolute;
			  right: 40rpx;
			 top:20rpx;
		  }
		 
		  .swiper-item {
			  flex: 1;
			  flex-direction: column;
		  }
		
		  .page-item {
				flex: 1;
				flex-direction: row;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
		  }
		  
		  
</style>