w-front-end / select_good · Commits

Commit 899131a1b823f577c0055e895e8285579ed06011

Authored by 王强
1 parent 0240a9aa

工会页面，tabs吸顶距离问题处理~

Inline Side-by-side
Showing 2 changed files with 26 additions and 2 deletions
src/pages/labourUnion/labourUnion.vue
  View file @899131a
... ... @@ -56,7 +56,7 @@
56 56 </div>
57 57  
58 58 <!-- tab导航 -->
59   - <div class="tabs-box" :class="{'is-cnlive': isCNLive.value, 'is-open-app': $parent.isOpenApp.value, 'is-hide': $route.query.hideBack == true, 'tabsFixed': tabs.fixed}" ref='tabsBox'>
  59 + <div class="tabs-box" :class="{'is-cnlive': isCNLive.value, 'is-open-app': $parent.isOpenApp.value, 'is-hide': $route.query.hideBack == true, 'tabsFixed': tabs.fixed}" :style="{'top': this.tabs.top}" ref='tabsBox'>
60 60  
61 61 <!-- 横向滑动tabs导航组件 -->
62 62 <horiz-list v-if="tabs.list && tabs.list.length" @change="change"
... ... @@ -123,6 +123,7 @@
123 123 tabs: { // tabs设置
124 124 fixed: false, // 是否吸顶
125 125 offsetTop: 0, // 距离顶部距离
  126 + top: 0, // 吸顶的top值
126 127 active: 0, // 活动项
127 128 init: false, // tabs数据是否初始化过，防止重复设置tabs列表
128 129 list: [ // tabs数组
... ... @@ -540,6 +541,17 @@
540 541 // 设置tabsBox样式，如果window.scrollY >= tabsBox位置，tabsBox吸顶，否则不吸顶
541 542 this.$set(this.tabs, 'fixed', window.scrollY >= this.tabs.offsetTop);
542 543 }
  544 +
  545 + // 如果需要吸顶，设置tabsBox的top值
  546 + if (this.tabs.fixed) {
  547 +
  548 + // 设置吸顶的top值
  549 + this.$set(this.tabs, 'top', this.$refs.navBox.offsetHeight + 'px');
  550 + } else {
  551 +
  552 + // 设置吸顶的top值
  553 + this.$set(this.tabs, 'top', 0);
  554 + }
543 555 }
544 556 });
545 557 },
... ...
src/pages/shopList/shopList.vue
  View file @899131a
... ... @@ -47,7 +47,7 @@
47 47 <div class="dividing-line" v-if="coupons && coupons.length"></div>
48 48  
49 49 <!-- tab导航 -->
50   - <div class="tabs-box" :class="{'is-cnlive': isCNLive.value, 'is-open-app': $parent.isOpenApp.value, 'is-hide': $route.query.hideBack == true, 'tabsFixed': tabs.fixed}" ref='tabsBox'>
  50 + <div class="tabs-box" :class="{'is-cnlive': isCNLive.value, 'is-open-app': $parent.isOpenApp.value, 'is-hide': $route.query.hideBack == true, 'tabsFixed': tabs.fixed}" :style="{'top': this.tabs.top}" ref='tabsBox'>
51 51  
52 52 <!-- 横向滑动tabs导航组件 -->
53 53 <horiz-list v-if="tabs.list && tabs.list.length" @change="change"
... ... @@ -114,6 +114,7 @@
114 114 tabs: { // tabs设置
115 115 fixed: false, // 是否吸顶
116 116 offsetTop: 0, // 距离顶部距离
  117 + top: 0, // 吸顶的top值
117 118 active: 0, // 活动项
118 119 init: false, // tabs数据是否初始化过，防止重复设置tabs列表
119 120 list: [ // tabs数组
... ... @@ -669,6 +670,17 @@
669 670 // 设置tabsBox样式，如果window.scrollY >= tabsBox位置，tabsBox吸顶，否则不吸顶
670 671 this.$set(this.tabs, 'fixed', window.scrollY >= this.tabs.offsetTop);
671 672 }
  673 +
  674 + // 如果需要吸顶，设置tabsBox的top值
  675 + if (this.tabs.fixed) {
  676 +
  677 + // 设置吸顶的top值
  678 + this.$set(this.tabs, 'top', this.$refs.navBox.offsetHeight + 'px');
  679 + } else {
  680 +
  681 + // 设置吸顶的top值
  682 + this.$set(this.tabs, 'top', 0);
  683 + }
672 684 }
673 685 });
674 686 },
... ...