vue锚点设置

Vue 2019-12-18 794

传统的项目中使用锚点,多是采用以下方式:

<a href="#A">A</a>  
<a href="#B">B</a>

<p>123456789<p>  
<p>123456789<p>  
<p>123456789<p>  
<p>123456789<p>  
<a id="A"></a>  
<p>123456789<p>  
<p>123456789<p>  
<p>123456789<p>  
<p>123456789<p>  
<a id="B"></a>  
<p>123456789<p>  
<p>123456789<p>  
<p>123456789<p>  
<p>123456789<p>  

但是在vue中可能有些问题,但也适用,但是相对麻烦
1.使用传统方式
由于router-link的缘故,会自带当前网址的部分,因此采用a标签

<div class="alphabetical">  
    <ul>  
        <li v-for="(item, index) of alphabet" :key="index">  
            <a :href="'#foreign-'+item" v-if="category" @click="goAnchor('#foreign-'+item)">{{item}}</a>  
            <a :href="'#anchor-'+item" @click="goAnchor('#anchor-'+index)" v-else>{{item}}</a>  
        </li>  
    </ul>  
</div>

###########################################  
<div class="cities" v-for="(city, name) of cities" :key="name">  
    <a :id="'foreign-'+name" v-if="category"></a>  
    <a :id="'anchor-'+name" v-else></a>  
    <common :city="city" :index="name"></common>  
</div>  

效果正常,但是刷新页面时,可能就存在问题了。因此在父组件中,编写方法,在刷新时,处理锚点后缀就可以了。
2.使用滚动(推荐)

<!--Html1-->  
<ul>  
    <li v-for="(item, index) of alphabet" :key="index">  
        <a href="javascript:;" v-if="category" @click="goAnchor('foreign-'+item)">{{item}}</a>  
        <a href="javascript:;" v-else @click="goAnchor('anchor-'+item)">{{item}}</a>  
    </li>  
</ul>  
<script>  
methods: {  
    goAnchor (selector) {  
      var anchor = document.getElementById(selector)  
      document.body.scrollTop = anchor.offsetTop // Chrome  
      document.documentElement.scrollTop = anchor.offsetTop // Firefox  
    }  
}  
</script>

<!--2-->  
<div class="cities" v-for="(city, name) of cities" :key="name">  
    <a :id="'foreign-'+name" v-if="category"></a>  
    <a :id="'anchor-'+name" v-else></a>  
    <common :city="city" :index="name"></common>  
</div>  

3.使用Vue Router(适用于history模式)
暂时没试过,试过后继续写

标签:Vue

文章评论

评论列表

已有0条评论