zoukankan      html  css  js  c++  java
  • vue封装js

    新建index.js

    import Vue from "vue";
        /**
         * 回到顶部功能实现过程:
         * 1. 获取页面当前距离顶部的滚动距离(虽然IE不常用了,但还是需要考虑一下兼容性的)
         * 2. 计算出每次向上移动的距离,用负的滚动距离除以5,因为滚动的距离是一个正数,想向上移动就是做一个减法
         * 3. 用当前距离加上计算出的距离,然后赋值给当前距离,就可以达到向上移动的效果
         * 4. 最后记得在移动到顶部时,清除定时器
         */
       const backtops= {
            backtop: function () {
    
                {
                    var timer = setInterval(function () {
                        let osTop = document.documentElement.scrollTop || document.body.scrollTop;
                        let ispeed = Math.floor(-osTop / 5);
                        document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
                        this.isTop = true;
                        if (osTop === 0) {
                            clearInterval(timer);
                        }
                    }, 30)
    
                }
            }
        }
    Vue.prototype.backtops = backtops;
    
    export default {};
    

    main导入js

    import './components/common/backtop/index'
    

    调用

     this.backtops.backtop(); 
    
  • 相关阅读:
    JS一些概念知识及参考链接
    CSS中浮动属性float及清除浮动
    前端一些概念知识及参考链接
    CSS中属性百分比的基准点
    CSS中的单位
    css居中问题
    Vue使用的扩展
    vue使用中的问题总结
    CSS中的position属性
    CSS中的flex布局
  • 原文地址:https://www.cnblogs.com/ouyangkai/p/14069991.html
Copyright © 2011-2022 走看看