3

vue中使用锚点定位

<template>
<div>
<div>
  <a href="javascript:void(0)" v-anchor="index" v-for="index in 20"> {{index}} </a>
</div>
 <div :id="'anchor-'+index" class="item" v-for="index in 20" >{{index}}</div>
</div>
</template>
<script>
import Vue from 'vue'
import $ from 'jquery'
Vue.directive('anchor', {
  inserted: function (el, binding) {
    el.onclick = function () {
      document.documentElement.scrollTop = $('#anchor-' + binding.value).offset().top
    }
  }
})
export default{
  data () {
    return {

    }
  }
}
</script>
<style>
.item{
width: 100%;
height: 200px;
line-height: 200px;
text-align: center;
}

</style>

本文参考链接:https://blog.csdn.net/Null_Bu...


HappyCodingTop
526 声望847 粉丝

Talk is cheap, show the code!!