vue移动端回顶部的方法监听滚动条

最新推荐文章于 2023-07-05 09:52:04 发布

周亚鑫

最新推荐文章于 2023-07-05 09:52:04 发布

阅读量222

点赞数 3

分类专栏： vue 文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/q4717529/article/details/121156897

版权

vue 专栏收录该内容

121 篇文章 15 订阅

订阅专栏

vue移动端回顶部的方法监听滚动条

这行写到最上面

    <div
      class="top-nav flex flex-jsa"
      :style="{ opacity: scrollTop / 150 }"
    ></div>

这是那个回顶部的图标代码

    <div class="center-gd" @click="backTop" v-show="falses == true">
      <img
        src="../../assets/img/top@2x.png"
        style="width: 37px;height: 37px;"
        alt=""
      />
    </div>

逻辑代码

export default {
  data() {
    return {
      scrollTop: 0,
      active: 0,
      falses: false,
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    //回顶部
    backTop() {
      window.scrollTo({
        top: 0,
        behavior: "smooth"
      });
      this.falses = false;
    },
    handleScroll() {
      this.scrollTop = window.pageYOffset;
    }
  },
  watch: {
    scrollTop(val) {
      if (val) {
        this.falses = true;
      } else {
        this.falses = false;
      }
    }
  },
  components: {},
  computed: {}
};
</script>