188 lines
3.8 KiB
Vue
188 lines
3.8 KiB
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>
|