stepsNav.vue 929 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <template>
  2. <view class="nav_box">
  3. <scroll-view :scroll-x="scrollable" :scroll-left="scrollLeft" scroll-with-animation
  4. class="u-tabs__wrapper__scroll-view" :show-scrollbar="false" ref="u-tabs__wrapper__scroll-view">
  5. <uniSteps :options="stepsList" :active="activeIndex" @selectStep="selectStep"></uniSteps>
  6. </scroll-view>
  7. </view>
  8. </template>
  9. <script>
  10. import uniSteps from './uni-steps.vue'
  11. export default {
  12. components: {
  13. uniSteps
  14. },
  15. props: {
  16. stepsList: {
  17. type: Array,
  18. default: () => []
  19. }
  20. },
  21. data() {
  22. return {
  23. scrollable: true,
  24. scrollLeft: 10,
  25. activeIndex: 5,
  26. }
  27. },
  28. created() {
  29. console.log(this.stepsList)
  30. this.$nextTick(() => {
  31. // this.scrollLeft = 10
  32. })
  33. },
  34. methods: {
  35. selectStep(item) {
  36. console.log(item);
  37. },
  38. }
  39. }
  40. </script>
  41. <style lang="scss" scoped>
  42. .nav_box {
  43. width: 100%;
  44. height: 130rpx;
  45. overflow-y: scroll;
  46. }
  47. </style>