锚点跳转（vue）

最新推荐文章于 2024-04-23 18:48:59 发布

丿刘先森

最新推荐文章于 2024-04-23 18:48:59 发布

阅读量1.3w

点赞数 6

分类专栏： vue 文章标签： vue 锚点跳转

本文链接：https://blog.csdn.net/lwx931449660/article/details/82972447

版权

vue 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

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);
  }
}

丿刘先森

关注

6
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
锚点跳转（vue）

第一种：利用a标记的herf属性和id属性来完成跳转，a标记的herf属性值等于想要跳转去的div的id属性的值。这种方法的缺点是点击锚点之后，浏览器的URL会发生变化，如果刷新可能会出现问题。demo：<div class="headertab"> <div class="tab"> <a href="#1">基本信息&lt...
复制链接

扫一扫