小程序中实现横向滚动点击平滑

<template>
	<view>
		<!-- tabs -->
		<view class="scroll-view-container">
			<scroll-view :show-scrollbar="false" scroll-x="true" :scroll-left="x" :scroll-with-animation="true">
				<view class="tab-container">
					<view :class="{active:active == index}" @tap="changeTabs(index)" v-for="(item,index) in tabsList" :key="index">
						{{item}}
						<view v-if="active == index" class="line"></view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				title: '',
				tabsList: [
					"自考公开课",
					"公开课",
					"专科",
					"本科",
					"公共英语三级"
				],
				x: ''
			};
		},
		onLoad(options) {
			// console.log(options)
			this.title = options.title
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.title
			});
		},
		methods: {
			changeTabs(i) {
				this.active = i
				let screenWidth = uni.getSystemInfoSync().windowWidth;
				let itemWidth = screenWidth / 5;
				let scrollX = itemWidth * i - itemWidth * 2;
				let maxScrollX = (this.tabsList.length + 1) * itemWidth;
				if (scrollX < 0) {
					scrollX = 0;
				} else if (scrollX >= maxScrollX) {
					scrollX = maxScrollX;
				}

				this.x = scrollX
			},
		}
	}
</script>

<style lang="less" scoped>
	.active {
		color: #333;
		font-size: 40upx;
	}

	.scroll-view-container {
		// 包裹scroll-view的容器
		height: 110upx;
		overflow: hidden; // 这个设置了就能截掉滚动条啦
	}

	scroll-view {
		width: 100%;
		white-space: nowrap; // 不让它换行

	}

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

	.tab-container {
		display: flex;
		align-items: center;
		height: 120upx;
		font-size: 36upx;
		color: #666;
		padding: 0 30upx 0 0;
		box-sizing: border-box;
		white-space: nowrap;

		>view {
			height: 100%;
			line-height: 120upx;
			position: relative;
			padding: 0 30upx;
			box-sizing: border-box;

			.line {
				position: absolute;
				bottom: 15upx;
				left: 50%;
				transform: translate(-50%);
				width: 30upx;
				height: 6upx;
				border-radius: 6upx;
				background-color: #4FC7FF;
				// margin: 0 auto;
			}
		}
	}
</style>