vue移动端实现页面滚动顶部导航栏渐变效果

话不多说，先看效果图

 

 

 代码如下

HTML部分

<div class="search" :style="style">
    <img class="scan" src="../../assets/images/scan.png" alt="" />
    <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        background="transparent"
        shape="round"
        />
     <img class="more" src="../../assets/images/more.png" alt="" />
</div>

 data和methods：

data() {
    return {
        value:"",
        style: { backgroundColor: "" },
        scrollTop: 0,
    }
}

methods: {
    handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;

      if (scrollTop >= 100) {
        this.style.backgroundColor = `rgba(131, 59, 196,${
          scrollTop / (scrollTop + 50)
        }) `;
      } else if (scrollTop == 0) {
        this.style.backgroundColor = "transparent";
      }
    },
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  },