aiot-app/pages/pda/components/stepsNav.vue

<template>
	<view class="nav_box">
		<scroll-view :scroll-x="scrollable" :scroll-left="scrollLeft" scroll-with-animation
			class="u-tabs__wrapper__scroll-view" :show-scrollbar="false" ref="u-tabs__wrapper__scroll-view">
			<uniSteps :options="stepsList" :active="activeIndex" @selectStep="selectStep"></uniSteps>
		</scroll-view>
	</view>
</template>

<script>
	import uniSteps from './uni-steps.vue'
	export default {
		components: {
			uniSteps
		},
		props: {
			stepsList: {
				type: Array,
				default: () => []
			},

			taskId: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				scrollable: true,
				scrollLeft: 0,
				activeIndex: 0,

			}
		},

		watch: {

			taskId: {
				immediate: true,
				deep: true,
				handler(newVal) {
					this.activeIndex = this.getIndexOfElementInArray(this.stepsList, newVal)
					this.scrollLeft = 84 * this.activeIndex + 10
				}
			}
		},





		methods: {
			selectStep(item) {
				this.$emit('selectStep', item)

			},

			getIndexOfElementInArray(array, target) {
				for (let i = 0; i < array.length; i++) {
					if (array[i].taskId === target) {
						return i; // 返回第一次出现target的索引位置
					}
				}
				return -1; // 未找到目标值时返回-1
			}


		}
	}
</script>

<style lang="scss" scoped>
	.nav_box {
		width: 100%;
		height: 130rpx;
		overflow-y: scroll;
	}
</style>