https://www.cnblogs.com/viete/p/12395548.html
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);
});
}
}
};
@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%;
}
}