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="stepOptions" :active="activeIndex" @selectStep="selectStep"></uniSteps>
		</scroll-view>
	</view>
</template>

<script>
	import uniSteps from './uni-steps.vue'
	export default {
		components: {
			uniSteps
		},
		data() {
			return {
				scrollable: true,
				scrollLeft: 10,
				activeIndex: 5,
				stepOptions: [{
						title: '基本信息',
						index: 0
					},
					{
						title: '门店信息',
						index: 1
					},
					{
						title: '门店图片',
						index: 2
					},
					{
						title: '等待审核',
						index: 3
					},

					{
						title: '测试',
						index: 4
					},

					{
						title: '测试22',
						index: 5
					},
					{
						title: '测试444',
						index: 6
					}
				],

			}
		},
		
		created() {
			this.$nextTick(() => {
				// this.scrollLeft = 10
			})
		},

		methods: {
			selectStep(item) {
				console.log(item);
			},


		}
	}
</script>

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