滚动到一定位置,导航条固定

滚动到一定位置,导航条固定

两个tab-control

<tab-control
      class="home-tab-control"
      @tabClick="tabClick"
      :tabList="['流行', '新款', '精选']"
      ref="tabControl1" v-show="isTabFixed"
    />

<tab-control
        class="home-tab-control"
        @tabClick="tabClick"
        :tabList="['流行', '新款', '精选']"
        ref="tabControl2"
      />

根据滚动高度控制v-show="isTabFixed"

<scroll
      ref="scroll"
      class="scroll"
      :probe-type="3"
      :pull-up-load="true"
      @scroll="contentScroll"
      @pullingUp="loadMore"
    >

	// 3.根据滚动
    contentScroll(position) {
      // 2.决定tabControl是否吸顶
      this.isTabFixed = -position.y > this.tabOffsetTop;
    },

	// 5.轮播图图片是否加载完(tabOffsetTop的值才正确)
    imageLoad() {
    //isLoad = false设置
      if (!this.isLoad) {
        this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop;
        this.isLoad = true;
      }
    }

<img :src="item.image" @load="imageLoad" />