zoukankan      html  css  js  c++  java
  • vue 置顶组件

    <template>
        <div id="backtop">
            <img
                src="@/assets/temp/top.png"
                alt="置顶"
                @click="backtop"
                v-show="totop"
                class="backtop"
            />
        </div>
    </template>
    
    <script>
    export default {
        data() {
            return {
                totop: false
            };
        },
        components: {},

        //监听滚动事件
        利用VUE写一个在控制台打印当前的scrollTop。首先,在 mounted 钩子中给window添加一个滚动滚动监听事件:

        mounted() {
            console.log(1);
            window.addEventListener("scroll", this.scrolltotop);
        },
       //
    离开该页面需要移除这个监听的事件
        destroyed() {
            window.removeEventListener("scroll", this.scrolltotop);
        },
        methods: {

          //监听回到顶部按钮距浏览器顶部的距离,滚动的距离如果大于浏览器高度时,设置 toTop 为true,否则就是false

            scrolltotop() {
                let scrollTop =
                    window.pageYOffset ||
                    document.documentElement.scrollTop ||
                    document.body.scrollTop;
                if (scrollTop > 400) {
                    this.totop = true;
                } else {
                    this.totop = false;
                }
            },
            //回到顶部 点击回到顶部按钮,让距离逐渐减少,形成上划的效果
            backtop() {
                let back = setInterval(() => {
                    if (
                        document.body.scrollTop ||
                        document.documentElement.scrollTop
                    ) {
                        document.body.scrollTop -= 100;
                        document.documentElement.scrollTop -= 100;
                    } else {
                        clearInterval(back);
                    }
                });
            }
        }
    };
    </script>
    
    <style lang="less" scoped>
    .backtop {
        position: fixed;
         30px;
        height: 30px;
        bottom: 75px;
        right: 12px;
        z-index: 100;
        opacity: 0.6;
    }
    </style>
    <template>
      <a href="javascript:;" class="toTop" @click="backTop" v-show="backToTop">
        <i class="iconfont">&#xe65d;</i>
      </a>
    </template>
  • 相关阅读:
    PHP递归方法实现前序、中序、后序遍历二叉树
    php循环方法实现先序、中序、后序遍历二叉树
    Mac charles 抓取https请求,安装证书后还是显示unknown
    PHP工厂模式
    PHP策略模式2
    PHP单例模式
    PHP 面试知识点整理归纳
    十大迷你iPhone天气应用
    来自极客标签10款最新设计素材-系列十三
    帮助快速生成页面固定显示元素的jQuery插件
  • 原文地址:https://www.cnblogs.com/yaoling/p/14303167.html
Copyright © 2011-2022 走看看