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: 10,
				activeIndex: 0,

			}
		},
		
		watch: {
			
			taskId:{
			    immediate: true,
				deep: true,
			    handler(newVal){
				 this.activeIndex = this.getIndexOfElementInArray(this.stepsList, newVal)
			    }
			}
		},
		
		

	

		methods: {
			selectStep(item) {
				console.log(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>