https://www.cnblogs.com/viete/p/12395548.html
<template>
? <div class="good">
? ? <div class="good-hearder">
<narBar :narBarValue="header"></narBar>
</div>
<div class="good-nav" :style="{opacity:opacity}">
<div class="good-nav-title">
<nav class="good-nav-title-detail">
<a @click="onScrollGoods" href="javascript:" :class="{'active':active=='goods'}">商品</a>
<a @click="onScrollDetail" href="javascript:" :class="{'active':active=='detail'}">詳情</a>
<a @click="onScrollEvaluation" href="javascript:" :class="{'active':active=='evaluation'}">評(píng)價(jià)</a>
</nav>
</div>
</div>
? ? <div class="good-swiper">
<swiper :imgList="images"></swiper>
</div>
? ? <div class="good-wrap">
<wrap :spuData="spuData"></wrap>
</div>
</div>
</template>
<script>
import narBarfrom "@/components/NavBar/index";
import swiperfrom "@/components/Swiper/index";
import wrapfrom "@/components/Wrap/index";
export default {
name:"index",
data() {
return {
// active: 1,
? ? ? header:"商品詳情",
imgList: [
{img: require("@/assets/img/good.jpg") },
{img: require("@/assets/img/good.jpg") },
{img: require("@/assets/img/good.jpg") },
{img: require("@/assets/img/good.jpg") }
],
spuData:"",
decript:"",//富文本編輯顯示的文字和圖片字段
? ? ? images: [],
/*下滑參數(shù)*/
? ? ? scrollTop:0,
opacity:0,
active:'goods',
};
},
components: {
narBar,
swiper,
wrap
},
created() {
//獲取詳情
? ? this.handleDetail();
},
mounted() {
window.addEventListener('scroll',this.handleScroll);
},
methods: {
handleScroll(){
let scrollTop =window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop;
if (scrollTop <200) {
// 當(dāng)滾動(dòng)距離小于200時(shí)，計(jì)算導(dǎo)航透明度疑务，可以考慮修改為每20增加0.1
// this.opacity = (scrollTop / 200).toFixed(1);
? ? ? ? this.opacity =scrollTop /200;
this.active ='goods';
return
? ? ? }else {
this.opacity =1
? ? ? }
// 當(dāng)滾動(dòng)距離不小于200時(shí)，獲取三個(gè)部分的頂部位置-46啼辣。
? ? ? let getDetail=document.getElementById('detail');
let getEvaluation=document.getElementById('evaluation');
let detail =getDetail.offsetTop -106;
let evaluation =getEvaluation.offsetTop -106;
// 計(jì)算滾動(dòng)距離在哪個(gè)區(qū)間，修改this.active對(duì)應(yīng)的樣式名
? ? ? if (scrollTop
else if (scrollTop >=detail &&scrollTop
else if (scrollTop >=evaluation) {if (this.active !='evaluation')this.active ='evaluation'; }
},
onScrollGoods(){
window.scrollTo({top:0,behavior:"smooth" });
},
onScrollDetail(){
let getDetail=document.getElementById('detail');
if (!this.opacity)return;
window.scrollTo({top:getDetail.offsetTop -106,behavior:"smooth" });
},
onScrollEvaluation(){
let getEvaluation=document.getElementById('evaluation');
if (!this.opacity)return;
window.scrollTo({top:getEvaluation.offsetTop -106,behavior:"smooth" });
},
//獲取詳情
? ? handleDetail() {
// 傳id或者spuId(*****)
? ? ? let url =`/mall/app/spu/detail?spuId=55`;
this.$get(url)
.then(({ data }) => {
if (data.code ==100000) {
// this.$toast.success('成功文案');
? ? ? ? ? ? console.log(data);
this.spuData = data.data.decript;
this.decript = data.data.decript;
this.images = data.data.images;
}
})
.catch(error => {
console.log(error);
});
}
}
};
</script>
<style lang="scss" scoped>
@import "@css/style.scss";
.good {
margin-top:46px;
background:$textBackgroundColors;
&-swiper {
width:100%;
background:$textSwiperColor;
}
&-nav {
z-index:99;
opacity:999;
position:fixed;
width:100%;
background:$textBackgroundColor;
min-height:px2rem(50);
height:px2rem(50);
&-title{
width:90%;
margin:0 auto;
&-detail{
a{
font-weight:500;
line-height:px2rem(20);
font-size:px2rem(14);
color:$textMoneyCourier;
margin-right:px2rem(50);
}
}
}
}
&-wrap {
width:100%;
}
}
</style>
