ebike-plus-wx-maintenance/src/pages-sub/common/carDetail.vue

<script lang="ts" setup>
import { systemInfo } from '@/utils/systemInfo'

definePage({
  style: {
    navigationBarTitleText: '车辆详情',
    navigationBarBackgroundColor: '#1488f5',
    navigationBarTextStyle: 'white',
  },
})
const currentIndex = ref(0) // 当前选中的 tabbar index
const pageNum = ref(5)
const tabList = ref([
  {
    name: '关注',
  },
  {
    name: '推荐',
  },
  {
    name: '电影',
  },
  {
    name: '科技',
  },
  {
    name: '音乐',
  },
  {
    name: '美食',
  },
  {
    name: '文化',
  },
  {
    name: '财经',
  },
  {
    name: '手工',
  },
])
const contentItemInnerConfig = reactive({
  height: 300,
})

function tabClick(item: any) {
  const { index } = item
  currentIndex.value = index
}
onLoad(() => {
  contentItemInnerConfig.height = 48
})
</script>

<template>
  <view class="detail_container">
    <!-- 详情页头部 -->
    <view class="header_tabs">
      <uv-tabs
        :list="tabList"
        line-color="#ffffff"
        :active-style="{
          color: '#ffffff',
          fontWeight: 'bold',
        }"
        :item-style="{
          padding: '8px 15px',
        }"
        :inactive-style="{
          color: '#ffffff',
          fontSize: '30rpx',
        }"
        @click="tabClick"
      />
    </view>
    <!-- 内容区域 -->
    <view class="content_wrapper">
      <view
        class="content_slide"
        :style="{
          transform: `translateX(${(-currentIndex * 100) / pageNum}%)`,
          transition: 'transform .3s ease-in-out',
        }"
      >
        <!-- 内容项 -->
        <view class="content_item">
          <view
            class="content_item_inner"
            :style="{
              height: `calc(100vh - ${contentItemInnerConfig.height}px)`,
            }"
          >
            <view class="test1">
              asdas
            </view>
          </view>
        </view>
        <!-- 内容项 -->
        <view class="content_item">
          <view
            class="content_item_inner"
            :style="{
              height: `calc(100vh - ${contentItemInnerConfig.height}px)`,
            }"
          >
            page2
          </view>
        </view>
        <!-- 内容项 -->
        <view class="content_item">
          <view
            class="content_item_inner"
            :style="{
              height: `calc(100vh - ${contentItemInnerConfig.height}px)`,
            }"
          >
            page3
          </view>
        </view>
        <!-- 内容项 -->
        <view class="content_item">
          <view
            class="content_item_inner"
            :style="{
              height: `calc(100vh - ${contentItemInnerConfig.height}px)`,
            }"
          >
            page4
          </view>
        </view>
        <!-- 内容项 -->
        <view class="content_item">
          <view
            class="content_item_inner"
            :style="{
              height: `calc(100vh - ${contentItemInnerConfig.height}px)`,
            }"
          >
            page5
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.detail_container {
  width: 100%;

  .header_tabs {
    width: 100%;
    position: relative;
    padding-bottom: 10rpx;
    background-color: #1488f5;
  }

  .content_wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;

    .content_slide {
      display: flex;
      width: max-content;

      .content_item {
        width: 100vw; /* 或者使用 100% 如果父容器固定宽度 */
        box-sizing: border-box;
        display: inline-block;
        vertical-align: top;

        .content_item_inner {
          width: 100%;
          background-color: orange;
        }
      }
    }
  }
}

.test1 {
  width: 90%;
  background-color: white;
}
</style>