CSS:
<div id="details" ref="details" class="details" :class="tabList ? 'tabTop' : ''">
<a :class="{'active':leftTab}" @click="changeTab(1, '#goodsDetails')">商品详情</a>
<a :class="{'active':rightTab}" target="_self" @click="changeTab(0, '#buyNotes')">购买须知</a>
</div>
<div id="goodsDetails" v-html="bodyData.goods.decoration"></div>
<div id="buyNotes" class="buyNotes">
<p class="notes">购买须知</p>
<ul>
<li v-if="bodyData.goods.prompt">
<p>· {{bodyData.goods.prompt}}</p>
</li>
</ul>
</div>
data () {
return {
tabListTop: '', // 选项卡距顶部距离
tabList: false, // 整个tab
leftTab: true, // 详情页tab
rightTab: false, // 购买须知tab
}
}
methods: {
// 监听页面滚动事件
paperScroll () {
// 控制商品详情和购买须知选项卡的位置（固定在顶部还是正常）
if (scroll.scrollTop >= this.tabListTop) {
this.tabList = true
} else {
this.tabList = false
}
// 控制详情和购买须知样式切换
console.log('滑动距离：' + scroll.scrollTop)
console.log('屏幕高度：' + window.innerHeight)
console.log('main滚动高度：' + scroll.scrollHeight)
if (scroll.scrollTop + window.innerHeight < scroll.scrollHeight) {
this.leftTab = true
this.rightTab = false
} else {
this.leftTab = false
this.rightTab = true
}
}
/*
* 详情和购买须知切换
* */
changeTab (i, idName) {
// Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内
// behavior这个选项决定页面是如何滚动的，实测auto与instant都是瞬间跳到相应的位置，而smooth就是有动画的过程
document.querySelector(idName).scrollIntoView({behavior: 'smooth'})
if (i) {
this.leftTab = true
this.rightTab = false
} else {
this.leftTab = false
this.rightTab = true
}
}
} style:
因为页面是滚动的，头部固定不动，内容可以滚动，所以这里记得给头部固定的位置position:
relative
.tabTop {
position: absolute;
top: @mainHeight;
left: 0;
width: 100%;
background-color: #ffffff;
}