uniapp：列表渲染下tap切换底部滑动块效果实现（vue）升级

这次之前得tap切换效果是实现了但是，不大灵动，比如这样子的：

可以看见此时得tap切换下面得横条是直接消失又出现得，下面得是升级版：

这样得话是不是就看起来丝滑很多下面得横条是直接从第一个盒子滑动到第二个盒子。

源码如下：

<template>
	<view class="tap">
		<view class="container">
			<view class="item" v-for="(item, index) in itemList" :key="index" :class="{ active: selectedIdx === index }"
				@click="selectItem(index)">
				{{ item.name }}
			</view>
			<view class="line" :style="{ left: selectedIdx * 374 + 'rpx' }">

			</view>
		</view>
		
		<view class="information" v-show="selectedIdx==0" >
			<pinformation></pinformation>
		</view>
		<view class="informations" v-show="selectedIdx==1" >
			<step></step>
		</view>
	</view>
</template>

<script>
	import pinformation from '@/components/pinformation/pinformation.vue';
	import step from  '@/components/step/step.vue'
	export default {
		components:{
			pinformation,
			step
		},
		data() {
			return {
				selectedIdx: 0, // 默认选中第一个对象
				itemList: [{
						name: '基本信息'
					},
					{
						name: '审批流程'
					}
				],
			};
		},
		methods: {
			selectItem(index) {
				this.selectedIdx = index; // 更新选中的索引
			},
		},
	};
</script>

<style lang="scss" scoped>
	.tap{
		width: 100%;
		height: 100vh;
		background-color: #ffffff;
	}
	.container {
		position: relative;
		display: flex;
	}

	.item {
		flex: 1;
		text-align: center;
		padding: 10px;
		cursor: pointer;
		color: #b7b8b7;
	}

	.active {
		color: #5290ff;
		background-color: #ffffff;
	}

	.line {
		position: absolute;
		bottom: 0;
		height: 4rpx;
		width: 374rpx;
		background-color: #5290ff;
		transition: left 0.5s;
	}
	.information{
		width: 100%;
		height: 100vh;
		background-color: #f9f9f9;
	}
	.informations{
		width: 100%;
		height: 100vh;
		padding-top: 20rpx;
		background-color: #f9f9f9;
	}
	.Type-purchase{
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
	}
</style>

注意：代码中的这些部分是自定义组件，需要区components目录中进行注册才行

核心部分：

html部分

JavaScript部分

css部分

原理：先在父级盒子中的container的样式中加入position: relative;  在横条从横条的样式中加入position: absolute;组成子绝父相的格式，然后bottom=0，让横条在父级盒子底部，然后设置transition: left 0.5s;让向右滑动的效果持续0.5秒，然后在html页面中通过v-bind的绑定横条left的样式通过索引selectedIdx * 374（这是每个盒子的宽度）+rpx（单位），在JavaScript中通过列表渲染的每个盒子的下标index赋值给selectedIdx从而实现横条向右滑动的效果