uni-app--tabs切换swiper

父组件

<template>
	<view>
		<tabs-swiper :TabsList='TabsList' :tabIndex='tabIndex' :tabData="tabData" @changTab="changTab" style="min-height: 90rpx;" ></tabs-swiper>
		
		<swiper class="swiper-box" :current="tabIndex" @animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y class="scroll-item">
					<view style="height: 2000rpx;background-color: #1CBBB4;">1
					</view>
				</scroll-view>
			</swiper-item>
			
			<swiper-item class="swiper-item" v-for="(item,index) in list">
				<scroll-view scroll-y class="scroll-item">
					<view :style="{height:'2000rpx',backgroundColor:`${item.color}`}">
						{{item.count}}
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import tabsSwiper from "./plugin/u-tabs-swiper.vue"
export default {
	components:{ tabsSwiper },
	data() { 
		return {
			TabsList: [{name: '待付款'},{name: '待发货'},{name: '待收货'},{name: '待评价',count: 12},{name: '待确认',count: 12}],
			tabIndex:0,
			tabData:{
				color:'#aa0000',
				Num:4,
			},
			scrollLeft:0,
			list:[{count:2,color:'pink'},{count:3,color:'green'},{count:4,color:'pink'},{count:5,color:'black'}]
		}
	},
	methods: {
		changTab(index){
			this.tabIndex = index
		},
		//  swiper滑动时触发   这里的{ detail: { current } }为解构，获取到事件源中的detailcurrent
		animationfinish({ detail: { current } }){ 
			 this.tabIndex = current
		}
	}
};
</script>

<style scoped lang="scss">
.swiper-box {
	padding-top: 90rpx;
	height: 100vh;
	background-color: #E8F4D9;
	.swiper-item {
		.scroll-item{
			height: 100%;width: 100%;
		}
	}
}
</style>

子组件

<template>
	<scroll-view scroll-x class="u-scroll-view" :scroll-left="scrollLeft">
		<view class="u-tabs-item"  v-for="(item,index) in TabsList" :key="index"
		 @tap="changTab(index)" 
		 :style="{ 'color':index==tabIndexQ ? `${tabData.color}` : 'black',
		  'borderBottom': index==tabIndexQ ? `1rpx solid ${tabData.color}` : '0rpx solid black',
		  'width': `calc(100% / ${tabData.Num})`}">
			{{ item.name }}
		</view>
	</scroll-view>
</template>
<script>
	/*
	* TabsList 标签数组
	* tabIndex swiper滑动时对应上tab选中样式
	* tabData { color:选中tab颜色 , Num: 可见标签数 }
	* @changTab 点击tabs对应上相应swiper-item
	*/
	export default{
		props:{
			TabsList: {
				type: Array,
				default () {
					return [];
				}
			},
			tabIndex:{
				type:Number,
				default () {
					return 0;
				}
			},
			tabData:{
				type:Object,
				default(){
					return {
						color:'#F0AD4E',
						Num:4
					}
				}
			}
		},
		// 当父组件通过滑动swiper改变下标传替给子组件时，子组件的值不会获取到新值，可通过监听事件重新赋值获取
		watch:{tabIndex(){ this.tabIndexQ = this.tabIndex }},  
		data(){
			return{
				tabIndexQ:this.tabIndex,
				scrollLeft: 0, // 滚动scroll-view的左边滚动距离  
				zIndex: 1,
			}
		},
		
		methods:{
			// tab切换 
			changTab(index){
				this.tabIndexQ = index
				// 当前下标的前下标数 * (可使用窗口宽度/ 可见标签数)
				this.scrollLeft = (this.tabIndexQ - 1) * (this.windowWidth / this.tabData.Num)
				this.$emit('changTab',index,this.scrollLeft)
			},
		}
	}
</script>

<style scoped lang="scss">
// .color-orger{ color: #F0AD4E;border-bottom: 1rpx solid #F0AD4E; }
.u-scroll-view {
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 99;
	box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
	text-align: center;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	transition: all 3s;
	background-color:white;
	
	.u-tabs-item {
		display: inline-block;
		height: 90rpx;
		line-height: 90rpx;
		// margin: 0 10rpx;
		// padding: 0 20rpx;  
	}
}
</style>

<script>
import Vue from 'vue'
export default {
	onLaunch: function() {
		uni.getSystemInfo({
			success: function(e) {
				Vue.prototype.windowWidth = e.windowWidth 
			}
		})
	},
}
</script>

待续。。。