锚点跳转(vue)
第一种:利用a标记的herf属性和id属性来完成跳转,a标记的herf属性值等于想要跳转去的div的id属性的值。这种方法的缺点是点击锚点之后,浏览器的URL会发生变化,如果刷新可能会出现问题。demo:<div class="headertab"><div class="tab"><a href="#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);
}
}
更多推荐
所有评论(0)