DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/learun-mpui/learun-ui-mp/nav.vue

<template>
  <scroll-view
    :scroll-left="scrollLeft"
    :class="['bg-' + color, type === 'center' ? 'text-center' : '', shadow ? 'nav-shadow' : '']"
    class="nav"
    style="z-index: 10;"
    scroll-with-animation
    scroll-x
  >
    <template v-if="type !== 'flex'">
      <view
        v-for="(item, idx) in items"
        @tap="tabSelect(idx)"
        :key="idx"
        :class="value === idx ? 'text-green cur' : ''"
        class="cu-item"
      >
        {{ item }}
      </view>
    </template>

    <view v-else class="flex text-center">
      <view
        @tap="tabSelect(idx)"
        v-for="(item, idx) in items"
        :key="idx"
        :class="[value === idx ? (color ? 'bg-white cur' : 'bg-green cur') : '']"
        class="cu-item flex-sub"
      >
        {{ item }}
      </view>
    </view>
  </scroll-view>
</template>

<script>
export default {
  name: 'l-nav',

  props: {
    color: { default: 'white' },
    items: { default: () => [] },
    value: {},
    type: { default: 'default' },
    shadow: {}
  },

  data() {
    return {
      scrollLeft: 0
    }
  },

  methods: {
    tabSelect(idx) {
      this.scrollLeft = (idx - 1) * 60

      this.$emit('input', idx)
      this.$emit('change', idx)
    }
  }
}
</script>

<style scoped>
.nav-shadow {
  box-shadow: 0px 0px 7px 0px #666;
}
</style>

<style>
:host {
  z-index: 10;
}
</style>