Vue仿京东移动端web版商品详情页滚动样式
要求：
- 页面顶部固定有 商品、评价、推荐、详情四个选项卡，对应四个部分的内容。
- 商品：显示轮播图、标题、价格等；评价：显示4条精选评价；推荐：显示两行三列6条推荐信息；详情：商品的详细介绍通常为富文本或一系列图片。
- 手动滚动页面，导航选项栏同样会自动切换对应样式。
- 当页面滚动距离为0时，导航选项栏透明度为0，且不可点击，每往下滚动20增加0.1，大于等于200时一直为1。（考虑性能可改为无级自动透明度或者每40增加0.2）
- 点任意选项卡会切换样式且滚动到对应的内容位置，
- 点击导航栏商品选项卡时时，滚动到0且透明度直接为0
预览效果
http://vietechen.gitee.io/jd/product/product.html
绑定滚动事件
mounted() {
window.addEventListener('scroll', this.handleScroll);
},
methods: {
// 监听页面滚动
handleScroll () {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
}
}
获取组件标签的位置
/**/
let recommendTop = this.$refs.comment.offsetTop - 45;
使页面滚动到某组件标签
评价
onScrollComment(){
document.documentElement.scrollTop = this.$refs.comment.offsetTop - 45;
// behavior 类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto,实测效果等同于instant
window.scrollTo({top: this.$refs.detail.offsetTop - 45, behavior: "smooth" });
},
完整代码
样式细节未打磨，部分js代码可自行修改优化。疯狂滚动CPU占用比京东低。
1 2 3 4 5 6 7 8Document 9 10 11 12 131470 134 215 216 217 2181528 2916 2627303531
我是商品标题32我是商品价格33for="(item, index) in 10" :key="index">其他34
36 373844精选评价39for="(item, index) in 4" :key="index"> 4043张若虚2019-10-{{item}}41春江潮水连海平，海上明月共潮生。42
45 464750猜你喜欢48for="(item, index) in 6" :key="index" style="width: 33%;" src="./apple-1.jpg" alt=""> 49
51 5253 5458 59我是商品详情 5557for="(item, index) in 5" :key="index" style="width: 100%;" src="./apple-1.jpg" alt=""> 56
6068 696167客服62店铺63购物车64加入购物车65立即购买66
Original: https://www.cnblogs.com/viete/p/12395548.html
Author: 不识少年愁
Title: Vue仿京东移动端web版商品详情页滚动样式
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/563479/
转载文章受原作者版权保护。转载请注明原作者出处！