【类 型】:fix
【原 因】:初始化 tabLine的位置错误 默认在最左边 没有根据current的索引来设置位置 【过 程】:在初始化 时候 更新tabLine的位置 封装一个设置tabLine的函数 【影 响】: # 类型 包含: # feat:新功能(feature) # fix:修补bug # docs:文档(documentation) # style: 格式(不影响代码运行的变动) # refactor:重构(即不是新增功能,也不是修改bug的代码变动) # test:增加测试 # chore:构建过程或辅助工具的变动
This commit is contained in:
parent
3838ee7563
commit
0f1b65a384
@ -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>
|
@ -55,11 +55,14 @@
|
||||
data() {
|
||||
return {
|
||||
tabList: ['待支付', '已付款', '退款售后'], // tab标签
|
||||
current: 0, //当前激活标签
|
||||
swiperCurrent: 0, // swiper组件的current值,表示当前那个swiper-item是活动的
|
||||
current: 1, //当前激活标签
|
||||
tabLineLeft: 24 //tabLine 样式表的left值
|
||||
}
|
||||
},
|
||||
onLoad(){
|
||||
//初始化 tapline的位置
|
||||
this.lineOffset(this.current)
|
||||
},
|
||||
computed: {
|
||||
//未付款订单
|
||||
orderList_unpaid() {
|
||||
@ -82,16 +85,21 @@
|
||||
// swiper滑动结束,设置current
|
||||
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) // 750是屏幕宽度,48是左右边距
|
||||
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) // 750是屏幕宽度,48是左右边距
|
||||
this.tabLineLeft = 24 + val * (tabWidth + spacing) // 计算新的 left 值
|
||||
//更新tapline 的位置
|
||||
this.lineOffset(val)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user