封装scroll，可以设置样式

组件：

<template>
	<view class="content">
		<view>
			<view class="tab" :style="{ 
				padding: completeTabStyle.padding,
				margin: completeTabStyle.margin,
				backgroundColor: completeTabStyle.bgColor,
				border: completeTabStyle.border,
				borderRadius: completeTabStyle.borderRadius,
				position: completeTabStyle.sticky ? 'sticky' : 'static',
				top: `${completeTabStyle.stickyTop}px`,
				}
				
				">
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
					<view id="demo1" class="scroll-view-item_H uni-bg-red" v-for="(item, index) in tabList" :key="index"
						:style="{
							minWidth:`${completeTabStyle.itemMW}rpx` ,
							height:`${completeTabStyle.itemH}rpx`,
							fontSize:completeTabStyle.fontSize,
							fontWeight:completeTabStyle.fontWeight,
							color:completeTabStyle.color,
								padding: completeTabStyle.padding,
					}" @click="scroll(index)">

						<view class="" style="display: flex;justify-content: space-between;align-items: center;">
							<view class="">
								<view v-if="tabIndex == index" :style="{
								fontSize:completeTabStyle.activeFontSize,
								fontWeight:completeTabStyle.activeFontWeight,
								color:completeTabStyle.activeColor}">
									{{ item }}
								</view>
								<view v-else>
									{{ item }}
								</view>
							</view>
							<view v-if="index < tabList.length - 1 && completeTabStyle.itemSplitBar" class="split-line"
								style="position: relative;" :style="{
							          backgroundColor:completeTabStyle.itemSplitBarColor,
							             height:`${completeTabStyle.itemSplitBarH}rpx`,
										 right:`${completeTabStyle.itemSplitBarR}rpx`
							          }">
								<view>
								</view>
							</view>
						
						</view>
						<view v-if="index == tabIndex && completeTabStyle.at"  class="attendant"
						:style="{
						   backgroundColor:completeTabStyle.atBgColor,
						      height:`${completeTabStyle.atH}rpx`,
							  width:`${completeTabStyle.atW}rpx`,
							  borderRadius:completeTabStyle.atBorderRadius,
							  bottom:`${completeTabStyle.atB}rpx` }" >
							<view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		<!-- 	<swiper @change="handle_swiperChange" :current="tabIndex" next-margin="100rpx">
				<swiper-item class="swiper" v-for="(item, index) in tabList" :key="index">
					{{ item }}
				</swiper-item>
			</swiper> -->
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			tabList: {
				type: Array,
				default: () => {
					return []
				}
			},
			tabStyle: {
				type: Object,
				default: () => {
					return {}
				}
			},
		},
		data() {
			return {
				tabIndex: 0,
				tab: ["热搜榜", "视频榜", "博客榜"],
			};
		},
		computed: {
			completeTabStyle() {
				return Object.assign({
						margin: "0px 0px 0px 0px", // tab的外边距
						padding: "0px 0px 0px 0px", // tab的内边距
						bgColor: "#fffff", // tab的背景颜色

						borderRadius: "0px", // tab的外圆角
						border: "none", // tab的外边框
						sticky: false, // 是否吸顶
						stickyTop: 0, // 吸顶距离

						itemMW: 100, // tab块最小宽度 滑动模式 生效
						itemH: 50, //  tab块高度
						fontSize: "16px", // tab块字体大小
						fontWeight: "normal", // tab块字体粗细
						color: "#333333", // tab块字体颜色
						activeColor: "#007aff", // tab块激活颜色
						activeFontSize: "16px", // tab块激活字体大小
						activeFontWeight: "normal", // tab块激活字体粗细
						itemSplitBar: true, // tab块的分割条
						itemSplitBarColor: "#999999", // tab块分割条的颜色
						itemSplitBarH: "auto", // tab块分割条的高度 支持写法 auto|50%|40px
						dot: false, // tab块提示点
						att: false,
						liveLineColor: '#fff',
						at: true, // 使用提示条
						atMode: "center bottom", // 提示条位置模式 组合模式： center [bottom|top]  提供上中 中 下中 三种模式
						atW: "auto", // 提示条的宽度 支持写法 auto|80%|100
						atH: 5, // 提示条的高度
						atBgColor: "#007aff", // 提示条背景颜色
						atBorderRadius: "5px", // 提示条的外圆角
					},
					this.tabStyle
				);
			},

		},
		methods: {
			scroll(i) {
				this.tabIndex = i;
			},
			handle_swiperChange(e) {
				console.log(e);
				this.tabIndex = e.detail.current
			},
		},
	};
</script>

<style scoped lang='less'>
	.tab {
		position: sticky;
		top: 0;
		z-index: 2;
	}

	.swiper {
		position: relative;
		z-index: 1;
		transition: height ease 300ms;
	}

	.swiper-slider {
		padding: 0 0 30rpx;
	}

	.content {
		height: 100vw;

		.scroll-view_H {
			white-space: nowrap;
		}

		.uni-bg-red {
			/* height: 50rpx; */
			display: inline-block;
			/* margin-right: 30rpx; */

		}

		.uni-bg-green {
			height: 50rpx;
			display: inline-block;
			margin-right: 30rpx;
		}

		.uni-bg-blue {
			height: 50rpx;
			display: inline-block;
		}
	}

	.swiper {
		width: 90rpx;
	}

	.active {
		color: red;
	}

	.split-line {
		position: absolute;
		right: 0;
		width: 1px;
	}
	 .attendant {
	
	    transition: top 300ms, left 300ms, width 300ms;
		margin: 0 auto
	  }
</style>

使用：

<template>
	<view class="tab">
		<switchTab :tabList="tabData.tabs" :tabStyle="tabData.style" ref="swiperTabPro"></switchTab>
	</view>
</template>

<script>
	import switchTab from './01.vue'
	export default {
		components: {
			switchTab
		},
		data() {
			return {
				tabIndex: 0,
				tabData: {
					tabs: ["店铺", "产品", "话题", "展会活动"],
					style: {
						margin: "10rpx 50rpx 100rpx 50rpx", // tab的外边距
						padding: "10rpx 10rpx 10rpx 10rpx", // tab的内边距
						bgColor: "#55ffff", // tab的背景颜色
						borderRadius: "20rpx", // tab的外圆角
						border: "none", // tab的外边框,(5px solid #ccc)
						sticky: false, // 是否吸顶true或false
						stickyTop: 0, // 吸顶距离


						itemMW: 20, // tab块最小宽度 滑动模式 生效
						itemH: 50, //  tab块高度
						
						fontSize: "36rpx", // tab块字体大小
						fontWeight: "normal", // tab块字体粗细
						color: "#ff00ff", // tab块字体颜色
						
						activeColor: "#007aff", // tab块激活颜色
						activeFontSize: "46rpx", // tab块激活字体大小
						activeFontWeight: "normal", // tab块激活字体粗细
						
						itemSplitBar: true, // tab块的分割条
						itemSplitBarColor: "#999999", // tab块分割条的颜色
						itemSplitBarH: "40", // tab块分割条的高度 支持写法 40
						itemSplitBarR:'-10',//对应padding

						at: true, // 使用提示条
						atW: 80, // 提示条的宽度 支持写法 100
						atH: 5, // 提示条的高度
						atBgColor: "#ffff7f", // 提示条背景颜色
						atBorderRadius: "5px", // 提示条的外圆角
						
					},
				},
			};
		},

		methods: {

		},
	};
</script>

<style>
</style>

效果：