<header>
       <!-- 下滑50px后消失 -->
      <div class="header-returns" v-show="isShow">
        <div>
          <i class="iconfont icon-fanhui"></i>
        </div>
        <div>
          <i class="iconfont icon-kefu"></i>
        </div>
      </div>
      <!-- 下滑50px后出现吸顶 -->
      <div class="header-bar" v-show="!isShow" :style="styleOption">
        <div>
          <i class="iconfont icon-fanhui"></i>
        </div>
        <div>
          <span>商品详情</span>
          <span>商品评价</span>
        </div>
        <div>
          <i class="iconfont icon-kefu"></i>
        </div>
      </div>
</header>

import BetterScroll from "better-scroll";

 data() {
    return {
      styleOption: {},
      betterScroll: "",
      isShow: true,
    };
  },
 mounted() {
    this.betterScroll = new BetterScroll(this.$refs.wrapper, {
      movable: true,
      zoom: true,
      click: true,
      bounce: false,
      probeType: 3,
    });
    this.betterScroll.on("scroll", (pos) => {
      let posY = Math.abs(pos.y);
      let opacity = posY / 180;
      opacity = opacity > 1 ? 1 : opacity; //如果opacity大于1就使它等于1，否则让他动态改变
      this.styleOption = {
        opacity: opacity,
      };
      if (posY >= 50) {
        this.isShow = false;
      } else {
        this.isShow = true;
      }
    });
  },