tab-control 吸顶效果

css 设置

它是一个比较新的属性，所以不是所有浏览器都能实现

position:sticky;
top:40px; //必须设置 top 的位置来确定它滚动到距离上面是哪里才开始 sticky

JS 设置

思路

1.必须知道滚动到多少时，开始有吸顶效果

   看这个元素距离上边的距离是多少，用属性 offserTop

   注意，这个属性值如果不准，是因为页面加载的时候图片是后加载的。这个值如果是在图片加载之前返回的就不准。需要先判断该元素上面的图片是否都加载完毕了，然后再开始计算这个值。

   this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop;

   //所有的组件都有一个属性 $el,用于获取组件中的 Dom 元素

2.将 Better Scroll 里面的 tabControl2 复制一份到 masthead 下面。先隐藏，等下面的 tabControl2 滚动到 offsetTop 的时候让这个障眼法的 tabControl1 来实现停留效果。

  这么写是因为 Better Scroll 的特殊性 设置 position 失效，因此我们不得不采取这种障眼法来达到效果。如果没有用 Better Scroll 的话，完全可以在滚动到 offsetTop 的时候设置 其 style 为： position: fix; left:0;right:0;top:44px; (44是 masthead 的高度)

<tab-control class="tab-control" ref="tabControl1" v-show="isShowTabControl" :titles='["新品", "热门", "小众2"]' @tabClick="tabClick" /> 


<scroll class="scroll" ref="scroll" :probeType="3" @scroll="handleScrollContent" :pullUpLoad="true" @pullingUp="loadMore">
。。。
。。。
。。。
。。。

  <tab-control ref="tabControl2" :titles='["新品", "热门", "小众2"]' @tabClick="tabClick" />
。。。
。。。
。。。
。。。
</scroll>
<back-top @click.native="backTopClick" v-if="isShowBackTop" />
<script type="text/javascript">
export default {
  components: { TabControl, Scroll, BackTop },
  data() {
    return {
      currentType: 'new', //当前显示的 tab 里的商品类型
      goods: {
        'new': { page: 0, list: [] },
        'pop': { page: 0, list: [] },
        'sell': { page: 0, list: [] }
      },
      isShowBackTop: false, // 是否显示返回顶部按钮
      tabOffsetTop: 0, //tabControl距离顶部的距离
      isShowTabControl: false, //是否显示吸顶的tabControl
    }
  },
  mounted() {
    this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop;
  },
  methods: {
    tabClick(i) { // tab 切换
      this.currentType = Object.keys(this.goods)[i];

      // 注意障眼法设置两个tabControl内部的currentIndex一致
      this.$refs.tabControl1.currentIndex = i;
      this.$refs.tabControl2.currentIndex = i;
    },
    handleScrollContent(position) { //监听滚动位置
      // 1.是否显示backTop图标
      this.isShowBackTop = (-position.y) > 1000;
      // 2.障眼法显示tabControl吸顶
      this.isShowTabControl = (-position.y) > this.tabOffsetTop;
    },
    backTopClick() { //返回顶部
      this.$refs.scroll.scrollTo();
    },
    loadMore() { //上拉加载更多
      this.getHomeGoods(this.currentType);
    },
  },
}
</script>
<style scoped>
.home {
  height: 100vh;
  position: relative;
}

.tab-control { /*障眼法的 tab 的 css*/
  position: relative; /*设置了 position 之后才可以设置 z-index*/
  z-index: 9;
}

.scroll {
  background-color: red;
  position: absolute;
  left: 0;
  right: 0;
  top: 44px;
  bottom: 49px;
  overflow: hidden;
}

.home-nav {
  background-color: #ffcffb;
}

</style>