目录
a标签href属性
scrollTop
keep-alive属性缓存
scrollIntoView()方法
a标签href属性
利用a标记的herf属性和id属性来完成跳转,a标记的herf属性值等于想要跳转去的div的id属性的值。
这种方法的缺点是点击锚点之后,浏览器的URL会发生变化,如果刷新可能会出现问题。
demo:
基本信息
设备编号
{{equipmentInfo.equipmentNo}}
规格
{{equipmentInfo.specification}}
创建时间
{{equipmentInfo.addDateTime}}
参数1
{{equipmentInfo.parameter1}}
使用状态
使用状态
{{useStatus.useStatus}}
界限值-高
{{useStatus.limitValueHigh}}
报警值-高
{{useStatus.alertValueHigh}}
位置信息
街区编码
{{locationInfo.locationNo}}
街区名称
{{locationInfo.locationName}}
大厦编码
{{locationInfo.buildingNo}}
大厦名称
{{locationInfo.buildingName}}
scrollTop
跳转
需要注意的是,各浏览器下获取 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属性缓存
是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和
相似,
是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。
会动态的将某一个组建绑定在视图中,并缓存数据,通过点击事件动态切换data中的数据,从而实现keep-alive 中component上绑定数据的变化,
demo
HTML
{{tab.name}}
JavaScript
scrollIntoView()方法
scrollIntoView()可以在所有的HTML元素上调用,通过滚动浏览器窗口或某个容器元素,
调用元素就可以出现在视窗中。如果给该方法传入true作为参数,或者不传入任何参数,那么 窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数,调用元素会尽可能全部出现在视口中(可能的话,调用元素的底部会与视口的顶部齐平。)不过顶部不一定齐平
基本信息
设备编号
{{equipmentInfo.equipmentNo}}
规格
{{equipmentInfo.specification}}
创建时间
{{equipmentInfo.addDateTime}}
参数1
{{equipmentInfo.parameter1}}
使用状态
使用状态
{{useStatus.useStatus}}
界限值-高
{{useStatus.limitValueHigh}}
报警值-高
{{useStatus.alertValueHigh}}
位置信息
街区编码
{{locationInfo.locationNo}}
街区名称
{{locationInfo.locationName}}
大厦编码
{{locationInfo.buildingNo}}
大厦名称
{{locationInfo.buildingName}}
采购信息
{{purchase.supplierName}}
联系人
{{pur.supplierPersonName}}
电话
{{pur.supplierPhone}}
岗位
{{pur.supplierPost}}
时间日期
生产日期
{{timeDate.productionDate}}
采购日期
{{timeDate.purchaseDate}}
入库日期
{{timeDate.storageDate}}
启用日期
{{timeDate.runDate}}
文档信息
文档名称
文档类型
文档概述
上传时间
上传人
操作
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);
}
}