锚点跳转（vue）

news/2024/7/10 1:45:10 标签: vue, 锚点跳转

目录

a标签href属性

scrollTop

keep-alive属性缓存

scrollIntoView()方法

a标签href属性

  利用a标记的herf属性和id属性来完成跳转，a标记的herf属性值等于想要跳转去的div的id属性的值。

这种方法的缺点是点击锚点之后，浏览器的URL会发生变化，如果刷新可能会出现问题。

demo：

<div class="headertab">
  <div class="tab">
     <a href="#1">基本信息</a>
     <a href="#2">使用状态</a>
     <a href="#3">位置信息</a>
  </div>
</div>

<div class="scrollview">
      <div class="contentview">
        <!-- 第一部分 -->
        <div class="infocontent" id="1">
          <div class="information">
            <div class="informationtap">
              <p>基本信息</p>
            </div>
          </div>
          <div class="informationdetail">
            <div><img src="../../assets/images/informationview/infomate.png" alt=""></div>
            <div class="infodetail">
              <table>
                <tr>
                  <td>设备编号</td>
                  <td>{{equipmentInfo.equipmentNo}}</td>
                  <td>规格</td>
                  <td>{{equipmentInfo.specification}}</td>
                  <td>创建时间</td>
                  <td>{{equipmentInfo.addDateTime}}</td>
                  <td>参数1</td>
                  <td>{{equipmentInfo.parameter1}}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <!-- 第二部分 -->
        <div class="infocontent"  id="2">
          <div class="information">
            <div class="informationtap">
              <p>使用状态</p>
            </div>
          </div>
          <div class="usingstate">
            <div class="statetable">
              <table>
                <tr>
                  <td>使用状态</td>
                  <td>{{useStatus.useStatus}}</td>
                  <td>界限值-高</td>
                  <td>{{useStatus.limitValueHigh}}</td>
                  <td>报警值-高</td>
                  <td>{{useStatus.alertValueHigh}}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <!-- 第三部分 -->
        <div class="infocontent"  id="3">
          <div class="information">
            <div class="informationtap">
              <p>位置信息</p>
            </div>
          </div>
          <div class="locationinfo">
            <div class="locationdetail">
              <table>
                <tr>
                  <td>街区编码</td>
                  <td>{{locationInfo.locationNo}}</td>
                  <td>街区名称</td>
                  <td>{{locationInfo.locationName}}</td>
                  <td>大厦编码</td>
                  <td>{{locationInfo.buildingNo}}</td>
                  <td>大厦名称</td>
                  <td>{{locationInfo.buildingName}}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>

scrollTop

<a href="javascript:void(0)" @click="goAnchor('#anchor')"> 跳转</a>

  需要注意的是，各浏览器下获取 scrollTop 有所差异

  Chrome： document.body.scrollTop

  Firefox： document.documentElement.scrollTop

methods: {
    goAnchor(selector) {
        var anchor = this.$el.querySelector(selector) // 参数为要跳转到的元素id
        document.body.scrollTop = anchor.offsetTop; // chrome
        document.documentElement.scrollTop = anchor.offsetTop; // firefox
    }
}

keep-alive属性缓存

<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 

 会动态的将某一个组建绑定在视图中，并缓存数据，通过点击事件动态切换data中的数据，从而实现keep-alive 中component上绑定数据的变化，

demo

HTML

<div id="tabView">
  <div class="radio-group" v-model="tabView">
    <span v-for="(tab ,index) in tabs" 
     :class="{cur:iscur==index}"
     @click="iscur=index,tabChange('Parking' + (index + 1))">{{tab.name}}
    </span>

    <keep-alive> 
    <!--  缓存路由的name属性等于tabView的组件 -->
      <component v-bind:is="tabView"></component>
    </keep-alive>
  </div>
</div>

JavaScript

<script>
import Parking1 from '@/components/bim-list/ParkingEquipment.vue'
import Parking2 from '@/components/bim-list/ParkingSpace'
import Parking3 from '@/components/bim-list/ParkingInOut'
export default {
  data() {
    return {
 	tabView: 'Parking1',
	tabs: [{name: "设备列表"}, {name: "车位列表"} ,{name: "进出记录"}],
	iscur: 0,
      };
  },
  components:{
    Parking1,
    Parking2,
    Parking3,
  },
  methods: {
    tabChange (tab) {
        this.tabView = tab;
    }
  }
};
</script>

scrollIntoView()方法

scrollIntoView()可以在所有的HTML元素上调用，通过滚动浏览器窗口或某个容器元素，

调用元素就可以出现在视窗中。如果给该方法传入true作为参数，或者不传入任何参数，那么 窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数，调用元素会尽可能全部出现在视口中（可能的话，调用元素的底部会与视口的顶部齐平。）不过顶部不一定齐平

<div class="tab">
  <a href="#" @click="Tocontone">基本信息</a>
  <a href="#" @click="Toconttwo">使用状态</a>
  <a href="#" @click="Tocontthree">位置信息</a>
  <a href="#" @click="Tocontfour">采购信息</a>
  <a href="#" @click="Tocontfive">质保信息</a>
  <a href="#" @click="Tocontsix">折旧信息</a>
</div>

<div class="contentview">
        <!-- 第一部分 -->
        <div class="infocontent" id="contone">
          <div class="information">
            <div class="informationtap">
              <p>基本信息</p>
            </div>
          </div>
          <div class="informationdetail">
            <div class="infoimg">
              <div><img src="../../assets/images/informationview/infomate.png" alt=""></div>
            </div>
            <div class="infodetail">
              <table>
                <tr>
                  <td>设备编号</td>
                  <td>{{equipmentInfo.equipmentNo}}</td>
                  <td>规格</td>
                  <td>{{equipmentInfo.specification}}</td>
                  <td>创建时间</td>
                  <td>{{equipmentInfo.addDateTime}}</td>
                  <td>参数1</td>
                  <td>{{equipmentInfo.parameter1}}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <!-- 第二部分 -->
        <div class="infocontent"  id="conttwo">
          <div class="information">
            <div class="informationtap">
              <p>使用状态</p>
            </div>
          </div>
          <div class="usingstate">
            <div class="statetable">
              <table>
                <tr>
                  <td>使用状态</td>
                  <td>{{useStatus.useStatus}}</td>
                  <td>界限值-高</td>
                  <td>{{useStatus.limitValueHigh}}</td>
                  <td>报警值-高</td>
                  <td>{{useStatus.alertValueHigh}}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <!-- 第三部分 -->
        <div class="infocontent"  id="contthree">
          <div class="information">
            <div class="informationtap">
              <p>位置信息</p>
            </div>
          </div>
          <div class="locationinfo">
            <div class="locationdetail">
              <table>
                <tr>
                  <td>街区编码</td>
                  <td>{{locationInfo.locationNo}}</td>
                  <td>街区名称</td>
                  <td>{{locationInfo.locationName}}</td>
                  <td>大厦编码</td>
                  <td>{{locationInfo.buildingNo}}</td>
                  <td>大厦名称</td>
                  <td>{{locationInfo.buildingName}}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <!-- 第四部分 -->
        <div class="infocontent"  id="contfour">
          <div class="information">
            <div class="informationtap">
              <p>采购信息</p>
            </div>
          </div>
          <div class="purchasing">
            <div class="purchasinfo">
              <table>
                <tr v-for="pur in purchase.supplierPerson">
                  <td>{{purchase.supplierName}}</td>
                  <td></td>
                  <td>联系人</td>
                  <td>{{pur.supplierPersonName}}</td>
                  <td>电话</td>
                  <td>{{pur.supplierPhone}}</td>
                  <td>岗位</td>
                  <td>{{pur.supplierPost}}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <!-- 第五部分 -->
        <div class="infocontent" id="contfive">
          <div class="information">
            <div class="informationtap">
              <p>时间日期</p>
            </div>
          </div>
          <div class="timedate">
            <div class="dateinfo">
              <table>
                <tr>
                  <td>生产日期</td>
                  <td>{{timeDate.productionDate}}</td>
                  <td>采购日期</td>
                  <td>{{timeDate.purchaseDate}}</td>
                  <td>入库日期</td>
                  <td>{{timeDate.storageDate}}</td>
                  <td>启用日期</td>
                  <td>{{timeDate.runDate}}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <!-- 第六部分 -->
        <div class="infocontent" id="contsix">
          <div class="information">
            <div class="informationtap">
              <p>文档信息</p>
            </div>
          </div>
          <div class="documentinfo">
            <div >
              <table>
                <tr>
                  <td>文档名称</td>
                  <td>文档类型</td>
                  <td>文档概述</td>
                  <td>上传时间</td>
                  <td>上传人</td>
                  <td>操作</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
methods:{
    Tocontone(){
      document.querySelector("#contone").scrollIntoView(true);
    },
    Toconttwo(){
      document.querySelector("#conttwo").scrollIntoView(true);
    },
    Tocontthree(){
      document.querySelector("#contthree").scrollIntoView(true);
    },
    Tocontfour(){
      document.querySelector("#contfour").scrollIntoView(true);
    },
    Tocontfive(){
      document.querySelector("#contfive").scrollIntoView(true);
    },
    Tocontsix(){
      document.querySelector("#contsix").scrollIntoView(true);
  }
}

 


http://www.niftyadmin.cn/n/509296.html

相关文章

vue 安装 bootstrap(vue安装JQuery)

vue 安装 bootstrap(vue安装JQuery)

vue项目中使用bootstrap的时候需要安装jquery&#xff0c;bootstrap&#xff0c;并配置&#xff0c;为什么要安装jquery呢&#xff0c;来看bootstrap官网的一段介绍 Bootstrap 中的许多组件需要依赖 JavaScript 才能运行。具体来说&#xff0c;他们依赖的是 jQuery、Popper.js …
阅读更多...
JQuery Ajax方法常用参数详解

JQuery Ajax方法常用参数详解

type: 表示发送请求的类型&#xff0c;string类型&#xff0c;有 GET POST PUT DELETE&#xff0c;最常用的就是GET POST&#xff0c;GET一般用于从服务器端获取数据&#xff0c;POST一般用于向服务器端发送数据。 &#xff08;简述二者的不同点&#xff1a;GET当然也可以…
阅读更多...
forEach()与each()方法的区别

forEach()与each()方法的区别

forEach()为JavaScript(ES5)的方法&#xff0c;而each()方法是JQuery的方法。 forEach() 方法用于调用数组的每个元素&#xff0c;并将元素传递给回调函数。 注意: forEach() 对于空数组是不会执行回调函数的。 forEach()的回调函数有三个参数&#xff0c;index&#xff0c;v…
阅读更多...
window onload和$(document).ready()及DOMContentLoaded的区别（DOM加载完毕前后调用）

window onload和$(document).ready()及DOMContentLoaded的区别（DOM加载完毕前后调用）

这两个函数的差别就在于调用的时机不同&#xff0c; 一般情况一个页面响应加载的顺序是&#xff1a;域名解析-加载html-加载js和css-加载图片等其他信息。 在日常开发中我们经常需要获取页面的元素进行操作&#xff0c;而在编写代码的时候为了代码易读性我们会将js代码放在一…
阅读更多...
浏览器对象详解（BOM）

浏览器对象详解（BOM）

在进行开发的时很多时候需要使用到浏览器对象&#xff0c;通过学习对浏览器对象有了一个大概了解&#xff0c;这里总结一下。 目录 window navigator screen location document history window window对象充当全局作用域&#xff0c;同时也代表浏览器窗口。 属性&#…
阅读更多...
如何开发jQuery插件（转）

如何开发jQuery插件（转）

原文&#xff1a;https://www.cnblogs.com/ajianbeyourself/p/5815689.html#_label0 阅读目录基本方法支持链式调用让插件接收参数面向对象的插件开发关于命名空间关于变量定义及命名压缩的好处工具GitHub Service Hook原文&#xff1a;http://www.cnblogs.com/Wayou/p/jquery_…
阅读更多...
jquery楼层滚动重要知识总结（页面滚动距离获取）

jquery楼层滚动重要知识总结（页面滚动距离获取）

浏览器页面的滚动事件 $(window).scroll(function() {// 当页面发生滚动时要做的事情 }); 获取当前页面内容区域的高度 $(window).innerHeight() 通常用 innerHeight()/2 内容区域一半的高度 获取 滚动条到页面顶部的垂直距离 $(document).scrollTop() …
阅读更多...
jquery 轮播图（从零开发编写）

jquery 轮播图（从零开发编写）

淡入淡出效果 利用的是绝对定位&#xff0c;绝对定位的元素会出现堆叠&#xff0c;jquery控制图片的隐藏与显示。 分享一个定位相关知识点 html <div class"banner"><ul class"bannerImg"><li><a href"script:;"><…
阅读更多...
最新文章

Copyright @ 2022~2023