vue 錨點跳轉
阿新 • • 發佈：2019-01-04
第一種：
利用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>
第二種：
<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) document.body.scrollTop = anchor.offsetTop; // chrome document.documentElement.scrollTop = anchor.offsetTop; // firefox } }
第三種：
<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()可以在所有的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);
}
}