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'}">评价</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: [],
/*下滑参数*/
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) {
// 当滚动距离小于200时，计算导航透明度，可以考虑修改为每20增加0.1
// this.opacity = (scrollTop / 200).toFixed(1);
this.opacity =scrollTop /200;
this.active ='goods';
return
}else {
this.opacity =1
}
// 当滚动距离不小于200时，获取三个部分的顶部位置-46。
let getDetail=document.getElementById('detail');
let getEvaluation=document.getElementById('evaluation');
let detail =getDetail.offsetTop -106;
let evaluation =getEvaluation.offsetTop -106;
// 计算滚动距离在哪个区间，修改this.active对应的样式名
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>
