目錄
1. 產品站頁面
2. 商品詳情頁面
產品站頁面
（1）組件吸頂實現
- 在要實現吸頂的組件文件ProductParam.Vue中
<template>
<div class="nav-bar">
<div class="container">
<div class="pro-title">
小米8
</div>
<div class="pro-param">
<a href="javascript:;">概述</a><span>|</span>
<a href="javascript:;">參數</a><span>|</span>
<a href="javascript:;">用戶評價</a>
<slot name="buy"></slot>
</div>
</div>
</div>
</template>
<script>
export default {
name:'nav-bar',
data() {
return {
isFixed: false
}
},
mounted() {
window.addEventListener('scroll', this.initHeight)
},
methods: {
initHeight() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
this.isFixed = scrollTop > 152? true: false
},
destroyed() {
window.removeEventListener('scroll', this.initHeight, false)
}
}
}
</script>
<style lang="scss">
@import './../assets/scss/config.scss';
@import './../assets/scss/mixin.scss';
.nav-bar{
height:70px;
line-height:70px;
border-top:1px solid $colorH;
background-color:$colorG;
z-index:10;
&.is_fixed{
position:fixed;
top:0;
width:100%;
box-shadow: 0 5px 5px $colorE;
}
}
</style>
（2）視頻模塊實現
- 在需要視頻模塊的文件product.vue中：
<div class="video-box">
<div class="overlay"></div>
<div class="video">
<span class="icon-close"></span>
<!--controls屬性指定視頻控件, muted靜音輸出 -->
<video src="/imgs/product/video.mp4" muted autoplay controls="controls"></video>
</div>
</div>
<style lang="scss">
.video-box{
.overlay{
@include position(fixed);
background-color:#333333;
opacity:.4;
z-index:10;
}
.video{
position:fixed;
top:-50%;
left:50%;
transform:translate(-50%,-50%);
z-index:10;
width:1000px;
height:536px;
.icon-close{
position:absolute;
top:20px;
right:20px;
@include bgImg(20px,20px,'/imgs/icon-close.png');
cursor:pointer;
z-index:11;
}
video{
width:100%;
height:100%;
object-fit:cover;
outline:none;
}
}
}
</style>
（3）視頻模塊實現
- 在文件product.vue中：
<div class="video-bg" @click="showSlide='slideDown'"></div>
<div class="video-box">
<div class="overlay" v-if="showSlide='slideDown'"></div>
<div class="video" v-bind:class="showSlide">
<span class="icon-close" @click="showSlide='slideUp'"></span>
<video src="/imgs/product/video.mp4" muted autoplay controls="controls"></video>
</div>
</div>
<script>
export default{
name:'product',
data(){
return {
showSlide:'',//控制動畫效果
}
}
}
</script>
<style>
/*省略重複樣式代碼*/
.video-box{
@keyframes slideDown{
from{
top:-50%;
opacity:0;
}
to{
top:50%;
opacity:1;
}
}
@keyframes slideUp{
from{
top:50%;
opacity:1;
}
to{
top:-50%;
opacity:0;
}
}
.video{
opacity:1;
&.slideDown{
animation:slideDown .6s linear;
top:50%;
}
&.slideUp{
animation:slideUp .6s linear;
}
}
}
</style>
（4）交互實現
- 在product.vue頁面中：
<!--省略了無關代碼-->
<template>
<div class="product">
<product-param v-bind:title="product.name">
<template v-slot:buy>
<button class="btn" @click="buy">立即購買</button>
</template>
</product-param>
<div class="content">
<div class="item-bg">
<h2>{{product.name}}</h2>
<h3>{{product.subtitle}}</h3>
<div class="price">
<span>￥<em>{{product.price}}</em></span>
</div>
</div>
</div>
</template>
<script>
export default{
name:'product',
data(){
return {
product:{},//商品信息
}
}
},
mounted(){
this.getProductInfo();
},
methods:{
getProductInfo(){
let id = this.$route.params.id;
this.axios.get(`/products/${id}`).then((res)=>{
this.product = res;
})
},
buy(){
let id = this.$route.params.id;
this.$router.push(`/detail/${id}`); //跳轉到商品詳情頁面
}
}
}
</script>
（5）解決一個視頻模塊bug
問題：在調試時，用於頁面窗口變小時，視頻樣式出現問題。
- 在文件product.vue中修改：
<div class="video-bg" @click="showSlide='slideDown'"></div>
<div class="video-box" v-show="showSlide">
<div class="overlay"></div>
<div class="video" v-bind:class="showSlide">
<span class="icon-close" @click="closeVideo'"></span>
<video src="/imgs/product/video.mp4" muted autoplay controls="controls"></video>
</div>
</div>
<script>
export default{
name:'product',
data(){
return {
showSlide:'',//控制動畫效果
},
methods: {
closeVideo(){
this.showSlide='slideUp';
setTimeout(()=>{
this.showSlide='';
},600)
}
}
}
}
</script>
商品詳情頁面
（1）清除浮動
- 在需要清除浮動的頁面：
<div class="item-version clearfix">
<div class="phone fl" :class="{'checked':version==1}" @click="version=1">6GB+64GB 全網通</div>
<div class="phone fr" :class="{'checked':version==2}" @click="version=2">4GB+64GB 移動4G</div>
</div>
在base.scss文件中：
.clearfix:before,.clearfix:after{
content:' ';
display:table;
}
.clearfix:after{
clear: both;
}
（2）交互實現
- 在detail.vue文件中：
<script>
export default{
name:'detail',
data(){
return {
err:'',
id: this.$router.params.id,
Product: {},
}
},
mounted(){
this.getProductInfo();
},
methods:{
getProductInfo() {
this.axois.get(`/product/${this.id}`).then((res) => {
this.Product = res;
})
},
addCart() {
this.axios.post('/carts', {
productId: this.id,
selected: true
}).then((res = {cartProductVoList:0}) => {
this.$store.dispatch('saveCartCount', res.cartProductVoList.length);
this.$router.push('/cart');
}).catch((res) => {
this.error = res;
})
}
}
}
</script>