【类 型】:fix

【原  因】:初始化 tabLine的位置错误 默认在最左边 没有根据current的索引来设置位置
【过  程】:在初始化 时候 更新tabLine的位置  封装一个设置tabLine的函数
【影  响】:

# 类型 包含:
# feat:新功能(feature)
# fix:修补bug
# docs:文档(documentation)
# style: 格式(不影响代码运行的变动)
# refactor:重构(即不是新增功能,也不是修改bug的代码变动)
# test:增加测试
# chore:构建过程或辅助工具的变动
This commit is contained in:
sszdot 2024-12-19 19:50:45 +08:00
parent 3838ee7563
commit 0f1b65a384
2 changed files with 15 additions and 17 deletions

View File

@ -38,9 +38,6 @@
</view>
</view>
</view>
<!-- 取餐列表 -->
<orderItem v-for="order in orderList" :order=order :key="order.id"></orderItem>
<view class="reserveBox"></view>
<!-- tabbar -->
<view>
<tabbar></tabbar>
@ -63,10 +60,6 @@
computed: {
userInfo() {
return this.$store.state.userInfo
},
//
orderList() {
return this.$store.state.orderList.filter(item => item.main_status === '已付款')
}
},
watch: {},
@ -83,8 +76,5 @@
width: 72rpx;
height: 72rpx;
}
.reserveBox {
margin-bottom: 60rpx;
}
</style>

View File

@ -55,11 +55,14 @@
data() {
return {
tabList: ['待支付', '已付款', '退款售后'], // tab
current: 0, //
swiperCurrent: 0, // swipercurrentswiper-item
current: 1, //
tabLineLeft: 24 //tabLine left
}
},
onLoad(){
// tapline
this.lineOffset(this.current)
},
computed: {
//
orderList_unpaid() {
@ -82,16 +85,21 @@
// swipercurrent
animationfinish(e) {
this.current = e.detail.current
},
// tabLine left
lineOffset(val){
// tabLine left
const tabWidth = 200
const spacing = (750 - tabWidth * this.tabList.length - 48) / (this.tabList.length -
1) // 75048
this.tabLineLeft = 24 + val * (tabWidth + spacing) // left
}
},
watch: {
current: {
handler(val) {
// tabLine left
const tabWidth = 200
const spacing = (750 - tabWidth * this.tabList.length - 48) / (this.tabList.length -
1) // 75048
this.tabLineLeft = 24 + val * (tabWidth + spacing) // left
//tapline
this.lineOffset(val)
}
}
}