sszdot
f38d04da86
【原 因】： 【过 程】：订单列表页ui tab标签切换组件设计 【影 响】： # 类型 包含: # feat：新功能（feature） # fix：修补bug # docs：文档（documentation） # style： 格式（不影响代码运行的变动） # refactor：重构（即不是新增功能，也不是修改bug的代码变动） # test：增加测试 # chore：构建过程或辅助工具的变动
66 lines
1.5 KiB
Vue
66 lines
1.5 KiB
Vue
<template>
|
||
<view>
|
||
<!-- topbar -->
|
||
<u-navbar title="确认订单" bgColor="#d43030" :titleStyle="{ color: '#FFF'}" :autoBack="true" placeholder>
|
||
<view class="u-nav-slot" slot="left">
|
||
<u-icon name="arrow-left" color="#fff" size="19"></u-icon>
|
||
</view>
|
||
</u-navbar>
|
||
<!-- tab -->
|
||
<view class="tabListBox m-l-24 m-r-24 m-t-24 flex msb">
|
||
<view class="tabBox flex mac mc fz32" v-for="(tab,index) in tabList" :key="index" @click="handlerTab(index)"
|
||
:class="current===index?'fb':''">
|
||
{{tab}}
|
||
</view>
|
||
</view>
|
||
<!-- tabLine -->
|
||
<view class="tabLineBox flex mac mc" :style="{ left: tabLineLeft + 'rpx' }">
|
||
<view class="tabLine rad8 bg-m"></view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
tabList: ['待支付', '已付款', '退款售后'], // tab标签
|
||
current: 0, //当前激活标签
|
||
tabLineLeft: 24 //tabLine 样式表的left值
|
||
}
|
||
},
|
||
methods: {
|
||
handlerTab(index) {
|
||
this.current = index
|
||
// 计算每个 tabLine 的left值
|
||
const tabWidth = 200
|
||
const spacing = (750 - tabWidth * this.tabList.length - 48) / (this.tabList.length -
|
||
1) // 750是屏幕宽度，48是左右边距
|
||
this.tabLineLeft = 24 + index * (tabWidth + spacing) // 计算新的 left 值
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.tabListBox {
|
||
height: 77rpx;
|
||
}
|
||
|
||
.tabBox {
|
||
width: 200rpx;
|
||
height: 77rpx;
|
||
}
|
||
|
||
.tabLineBox {
|
||
width: 200rpx;
|
||
height: 8rpx;
|
||
position: absolute;
|
||
transition: all .5s ease;
|
||
}
|
||
|
||
.tabLine {
|
||
width: 70rpx;
|
||
height: 8rpx;
|
||
}
|
||
</style> |