zoukankan      html  css  js  c++  java
  • Vue爬坑之旅(八):vue单页面中锚点跳转

    一般情况下我们在html中使用锚点时会利用链接方式请求‘#+id名称’,此时会在url后面跟一个#号。但是在单页面中会有路由误判的情况。所以在单页面中锚点可改为参数传递的方式。

    一、封装一个外部js:anchor.js

    //锚点跳转
    function goAnchor(selector) {
        var anchor = this.$el.querySelector(selector);//获取元素
        if(anchor) {
            setTimeout(()=>{//页面没有渲染完成时是无法滚动的,因此设置延迟
                anchor.scrollIntoView(); //js的内置方法,可滚动视图位置至元素位置
            },500);
        } 
    };
    //获取参数
    function GetQueryString(name){
         var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
         var r = window.location.search.substr(1).match(reg);
         if(r!=null)return  unescape(r[2]); return null;
    }
     
    export {
        goAnchor,
        GetQueryString
    }

    二、在需要使用锚点的页面引入js

    import { goAnchor, GetQueryString } from '../js/anchor';
     
    methods:{
       goAnchor,
       GetQueryString,
              
    },
    mounted(){
       let maodian=this.GetQueryString('anchor');//进入页面,如果带有锚点参数,则跳转至锚点地方,参数值就是id名
       if(maodian){
            console.log(maodian);
            this.goAnchor('#'+maodian);
       }
    }
  • 相关阅读:
    perlsplice
    perl中数组函数:delete和grep
    Python字符串格式化
    blast命令解释
    通俗解释托管与非托管
    四、GO语言的转义字符
    六、GO语言的指针
    五、GO语言的变量及数据类型
    一、GO语言的特点
    前台生成验证码案例
  • 原文地址:https://www.cnblogs.com/linfblog/p/12150770.html
Copyright © 2011-2022 走看看