欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中的錨點(diǎn)定位問題

 更新時(shí)間：2022年09月16日 10:30:36   作者：女程序媛的修煉筆記  
這篇文章主要介紹了vue中的錨點(diǎn)定位問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue錨點(diǎn)定位

在這里插入圖片描述

錨點(diǎn)定位與平滑滾動反定位支持

代碼如下

html

<div style="display: flex;height: 442px;">
? ? ? ? ? ? ? ? ? ? ? ?<el-tabs v-model="activeTabs" class="zxtabsStyle" tab-position="left" @tab-click="tabshandleClick">
? ? ? ? ? ? ? ? ? ? ? ? <el-tab-pane label="主要致險(xiǎn)情景" name="zxqj"></el-tab-pane>
? ? ? ? ? ? ? ? ? ? ? ? <el-tab-pane label="風(fēng)險(xiǎn)防控基本要求" name="yq"></el-tab-pane>
? ? ? ? ? ? ? ? ? ? ? ? <el-tab-pane label="管理措施" name="glcs"></el-tab-pane>
? ? ? ? ? ? ? ? ? ? ? ?</el-tabs>
? ? ? ? ? ? ? ? ? ? ? ?<div>
?//要切換滾動的內(nèi)容區(qū)域
<div class="con_tab" ref="content">
?? ?<div id="zxqj" class="conBlock">介紹</div>
?? ?<div id="yq" class="conBlock">課程目錄</div>
?? ?<div id="glcs" class="conBlock">課后福利</div>
</div>

js

mounted(){
//1.mounted里面自動監(jiān)聽滾動事件 ? 代碼如下
this.$refs.content.onscroll = ()=>{
? ? ?this.handleScroll();
?}
},
methods:{
? ? ? ? handleScroll () {
? ? ?let scrollTop = this.$refs.content.scrollTop;
? ? ? let blocks = document.querySelectorAll('.conBlock');
? ? ? blocks.forEach((item, index) => {
? ? ? ? console.log("blocks",item.id)
? ? ? ? ? if (scrollTop >= item.offsetTop) {
? ? ? ? ? ? ? this.activeTabs = item.id;
? ? ? ? ? }
? ? ? })
? },
? ? ? ? ?tabshandleClick(data){
? ? ? ? ? ? console.log("data",data)
? ? ? ? ? ? let index=Number(data.index)
? ? let blocks = document.querySelectorAll('.conBlock');
? ? let step = 40;//滾動步長
? ? let currentScrollTop = this.$refs.content.scrollTop;
? ? let targetOffsetTop = blocks[index].offsetTop;
? ? console.log("currentScrollTop",currentScrollTop);
? ? console.log("targetOffsetTop",targetOffsetTop);
? ? if(currentScrollTop > targetOffsetTop){
? ? ? ? const smoothUp = ()=>{
? ? ? ? ? ? if(currentScrollTop >= targetOffsetTop){
? ? ? ? ? ? ? ? if (currentScrollTop - targetOffsetTop >= step) {
? ? ? ? ? ? ? ? ? ? currentScrollTop -= step;
? ? ? ? ? ? ? ? ? ? setTimeout(smoothUp,1);
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? currentScrollTop = targetOffsetTop-step;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? this.$refs.content.scrollTop = currentScrollTop;
? ? ? ? ? ? }
? ? ? ? };
? ? ? ? smoothUp();
? ? }else{
? ? ? ? const smoothDown = ()=>{
? ? ? ? ? ? if (currentScrollTop <= targetOffsetTop) {
? ? ? ? ? ? ? ? // 如果和目標(biāo)相差距離大于等于step 就跳 step
? ? ? ? ? ? ? ? if (targetOffsetTop - currentScrollTop >= step) {
? ? ? ? ? ? ? ? ? ? currentScrollTop += step;
? ? ? ? ? ? ? ? ? ? setTimeout(smoothDown,1);
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? // 否則直接跳到目標(biāo)點(diǎn)，防止跳過
? ? ? ? ? ? ? ? ? ? currentScrollTop = targetOffsetTop-step;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? this.$refs.content.scrollTop = currentScrollTop;
? ? ? ? ? ? }
? ? ? ? };
? ? ? ? smoothDown();
? ? }
},
}

錨點(diǎn)定位bug無效和替代方式

在vue項(xiàng)目中，使用錨點(diǎn)定位會和router的規(guī)則沖突，在項(xiàng)目中的表現(xiàn)就是第一次點(diǎn)擊url改變了，但是沒有跳轉(zhuǎn)到錨點(diǎn)位置，再次點(diǎn)擊才會跳轉(zhuǎn)。

在vue項(xiàng)目中定義一個(gè)方法不適用錨點(diǎn)定位

scrollToSection(id) {
? ?let section = document.getElementById(id)
? ?if (section) {
? ? ? section.scrollIntoView()
? ?}
}

html標(biāo)簽中綁定click事件就可以了

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • vue-cli隨機(jī)生成port源碼的方法

    vue-cli隨機(jī)生成port源碼的方法

    這篇文章主要介紹了vue-cli隨機(jī)生成port源碼的方法，文中給大家介紹了vue 隨機(jī)色生成方法,需要的朋友可以參考下
    2019-09-09
  • 使用vue封裝一個(gè)自定義樣式的滾動條

    使用vue封裝一個(gè)自定義樣式的滾動條

    眾所周知,當(dāng)容器高度固定而內(nèi)容部分高度超出容器高度時(shí),瀏覽器會渲染出一個(gè)可以滾動并用于顯示剩余界面的條 -- 滾動條,它可以簡單的樣式修改,但是位置是固定的,無法移動,而我們需要改變位置的時(shí)候,它就不能滿足我們的需求了,這時(shí)我們可以自己手寫一個(gè)
    2023-10-10
  • VUEX?使用?mutations的兩種方式

    VUEX?使用?mutations的兩種方式

    這篇文章主要介紹了VUEX?使用?mutations的兩種方式,實(shí)現(xiàn)方式就是利用vuex中的mutations，在mutations中定義一個(gè)方法，這個(gè)方法就是把點(diǎn)擊的index（也就是每個(gè)列表的唯一標(biāo)識），傳給state中的當(dāng)前標(biāo)識，需要的朋友可以參考下
    2023-01-01
  • 基于element日歷組件實(shí)現(xiàn)簽卡記錄

    基于element日歷組件實(shí)現(xiàn)簽卡記錄

    這篇文章主要為大家詳細(xì)介紹了基于element日歷組件實(shí)現(xiàn)簽卡記錄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-08-08
  • vue 中的keep-alive實(shí)例代碼

    vue 中的keep-alive實(shí)例代碼

    這篇文章主要介紹了vue中的keep-alive實(shí)例代碼，vue實(shí)現(xiàn)組件信息緩存的方法，在文中也給大家提到,需要的朋友可以參考下
    2018-07-07
  • vue配置nprogress實(shí)現(xiàn)頁面頂部進(jìn)度條

    vue配置nprogress實(shí)現(xiàn)頁面頂部進(jìn)度條

    這篇文章主要為大家詳細(xì)介紹了vue配置nprogress實(shí)現(xiàn)頁面頂部進(jìn)度條，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2019-09-09
  • Element?plus中el-input框回車觸發(fā)頁面刷新問題以及解決辦法

    Element?plus中el-input框回車觸發(fā)頁面刷新問題以及解決辦法

    在el-form表單組件中el-input組件輸入內(nèi)容后按下Enter鍵刷新了整個(gè)頁面,下面這篇文章主要給大家介紹了關(guān)于Element?plus中el-input框回車觸發(fā)頁面刷新問題以及解決辦法,需要的朋友可以參考下
    2024-03-03
  • VUE + OPENLAYERS實(shí)現(xiàn)實(shí)時(shí)定位功能

    VUE + OPENLAYERS實(shí)現(xiàn)實(shí)時(shí)定位功能

    本系列文章介紹一個(gè)簡單的實(shí)時(shí)定位示例，基于VUE + OPENLAYERS實(shí)現(xiàn)實(shí)時(shí)定位功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
    2021-09-09
  • element tree樹形組件回顯數(shù)據(jù)問題解決

    element tree樹形組件回顯數(shù)據(jù)問題解決

    本文主要介紹了element tree樹形組件回顯數(shù)據(jù)問題解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-08-08
  • Vue對象賦值視圖不更新問題及解決方法

    Vue對象賦值視圖不更新問題及解決方法

    這篇文章主要介紹了Vue對象賦值視圖不更新問題及解決方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-06-06

最新評論