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,7 +56,7 @@
56 </div> 56 </div>
57 57
58 <!-- tab导航 --> 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 <!-- 横向滑动tabs导航组件 --> 61 <!-- 横向滑动tabs导航组件 -->
62 <horiz-list v-if="tabs.list && tabs.list.length" @change="change" 62 <horiz-list v-if="tabs.list && tabs.list.length" @change="change"
@@ -123,6 +123,7 @@ @@ -123,6 +123,7 @@
123 tabs: { // tabs设置 123 tabs: { // tabs设置
124 fixed: false, // 是否吸顶 124 fixed: false, // 是否吸顶
125 offsetTop: 0, // 距离顶部距离 125 offsetTop: 0, // 距离顶部距离
  126 + top: 0, // 吸顶的top值
126 active: 0, // 活动项 127 active: 0, // 活动项
127 init: false, // tabs数据是否初始化过，防止重复设置tabs列表 128 init: false, // tabs数据是否初始化过，防止重复设置tabs列表
128 list: [ // tabs数组 129 list: [ // tabs数组
@@ -540,6 +541,17 @@ @@ -540,6 +541,17 @@
540 // 设置tabsBox样式，如果window.scrollY >= tabsBox位置，tabsBox吸顶，否则不吸顶 541 // 设置tabsBox样式，如果window.scrollY >= tabsBox位置，tabsBox吸顶，否则不吸顶
541 this.$set(this.tabs, 'fixed', window.scrollY >= this.tabs.offsetTop); 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,7 +47,7 @@
47 <div class="dividing-line" v-if="coupons && coupons.length"></div> 47 <div class="dividing-line" v-if="coupons && coupons.length"></div>
48 48
49 <!-- tab导航 --> 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 <!-- 横向滑动tabs导航组件 --> 52 <!-- 横向滑动tabs导航组件 -->
53 <horiz-list v-if="tabs.list && tabs.list.length" @change="change" 53 <horiz-list v-if="tabs.list && tabs.list.length" @change="change"
@@ -114,6 +114,7 @@ @@ -114,6 +114,7 @@
114 tabs: { // tabs设置 114 tabs: { // tabs设置
115 fixed: false, // 是否吸顶 115 fixed: false, // 是否吸顶
116 offsetTop: 0, // 距离顶部距离 116 offsetTop: 0, // 距离顶部距离
  117 + top: 0, // 吸顶的top值
117 active: 0, // 活动项 118 active: 0, // 活动项
118 init: false, // tabs数据是否初始化过，防止重复设置tabs列表 119 init: false, // tabs数据是否初始化过，防止重复设置tabs列表
119 list: [ // tabs数组 120 list: [ // tabs数组
@@ -669,6 +670,17 @@ @@ -669,6 +670,17 @@
669 // 设置tabsBox样式，如果window.scrollY >= tabsBox位置，tabsBox吸顶，否则不吸顶 670 // 设置tabsBox样式，如果window.scrollY >= tabsBox位置，tabsBox吸顶，否则不吸顶
670 this.$set(this.tabs, 'fixed', window.scrollY >= this.tabs.offsetTop); 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 },