anchor锚点 antvue_vue中锚点的三种方法

第一种：

router.js中添加

mode: 'history',

srcollBehavior(to,from,savedPosition){

if(to.hash){

return {

selector:to.hash

}

}

}

组件：

• 星期1
• 星期2
• 星期3
• 星期4
• 星期5
• 星期6
• 星期7

11111111111111111111111111111111

22222222222222222222222222222222222

33333333333333333333333333333333333333

444444444444444444444444444444444444444

555555555555555555555555555555555555555

666666666666666666666666666666666666666

7777777777777777777777777777777777777777

export default {

data(){

return {

}

}

}

.list{

width: 100%;

height: 50px;

}

li{

width: 11%;

height: 50px;

line-height: 50px;

text-align: center;

border: 1px solid #ccc;

color: #ff6c00;

float: left;

list-style: none!important;

}

.main_con{

width: 100%;

height: 200px;

border: 1px solid #ccc;

line-height: 200px;

text-align: center;

color: blue;

}

第二种：

写一个方法  组件

{{index}}

{{index}}

export default{

data(){

return {

}

},

methods: {

goAnchor(selector) {

var anchor = this.$el.querySelector(selector)

document.documentElement.scrollTop = anchor.offsetTop

}

}

}

.item{

width: 100%;

height: 200px;

line-height: 200px;

text-align: center;

}

第三种： 自定义指令

{{index}}

{{index}}

export default{

data(){

return {

}

}

}

.item{

width: 100%;

height: 200px;

line-height: 200px;

text-align: center;

}

main.js  定义全局指令  方便其他地方复用

Vue.directive('anchor',{

inserted : function(el,binding){

el.onclick = function(){

document.documentElement.scrollTop = $('#anchor-'+binding.value).offset().top

}

}

})

总结

以上所述是小编给大家介绍的vue中锚点的三种方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！