city-gather/src/subPack-film/components/choose-time.vue

<script setup lang="ts">
const props = withDefaults(defineProps<{
  data?: [string, string][]
}>(), {
  data: () => [],
})

const emits = defineEmits(['change'])
const active = defineModel()
function handleTab(val: string) {
  active.value = val
  emits('change', val)
  console.log(active)
}
</script>

<template>
  <view>
    <!-- 影院时间 -->
    <scroll-view class="tabList" :scroll-x="true" scroll-with-animation :scroll-into-view="`tab${active}`">
      <view
        v-for="(item, index) in props.data" :id="`tab${item[0]}`" :key="index" class="tab"
        :class="[active == item[0] ? 'active' : '']" @click="handleTab(item[0])"
      >
        <!-- {{ filterDay(item) }} {{ timeFormat(new Date(item).getTime(), 'MM-dd') }} -->
        {{ `${item[1]} ${item[0]}` }}
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss" scoped>
    .tabList {
      white-space: nowrap;
      width: 100%;
      border-bottom: 1rpx solid #F0F0F0;
      padding-top: 20rpx;
      background: #fff;
      .tab {
        display: inline-block;
        padding: 0 12rpx 20rpx;
        font-weight: 400;
        font-size: 28rpx;
        color: #AAAAAA;
      }

      .tab.active {
        position: relative;
        color: #222222;

        &::after {
          content: '';
          position: absolute;
          bottom: 0%;
          left: 50%;
          transform: translateX(-50%);
          width: 28rpx;
          height: 6rpx;
          background: var(--them-color);
          border-radius: 4rpx 4rpx 4rpx 4rpx;
        }
      }
    }
</style>