<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: () => []
			}
		},
		data() {
			return {
				scrollable: true,
				scrollLeft: 10,
				activeIndex: 5,
	
			}
		},
		
		created() {
			console.log(this.stepsList)
			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>