商品详情页代码html,商品详情页food.vue

主体结构

html代码

用ref绑定food的DOM元素,为了被bscroll做滚动处理

用transition包裹了整个food,为了实现这个页面的进入和退出动画

js代码

import BScroll from 'better-scroll';

export default {

props: {

food: {

type: Object

}

},

data(){

return {

showFlag: false

}

},

methods: {

show(){

this.showFlag = true;

this.$nextTick(() => { //异步添加滚动绑定

if (!this.scroll) {

this.scroll = new BScroll(this.$refs.food, {

click: true

});

} else {

this.scroll.refresh();

}

})

},

hide(){

this.showFlag = false;

}

}

通过跟hide方法切换showFlag的值来实现显示隐藏

因为整个页面是比较长的,需要做滚动,所以异步加载bscroll

css代码

.food

position: fixed //霸占屏幕,全屏显示,所以用fixed布局

left: 0

top: 0

bottom: 48px //保留底部购物车底部栏的位置

z-index: 30 //z-index的数值是有考究的,要控制好各个页面的z-index纵深

width: 100%

background: #fff

transform: translate3d(0, 0, 0)

&.move-enter-active, &.move-leave-active //用vue的动画配置实现动画

transition: all 0.2s linear

&.move-enter, &.move-leave-active

transform: translate3d(100%, 0, 0)

对于整个商品详情页的打开和关闭效果体验,需要对其做动画处理,transition

动画是3d变形,从右往左(改变的是x坐标),直线移动(linear)

商品封面

html代码

js代码

export default {

props: {

food: { //用goods.vue组件传入的food数据

type: Object

}

}

}

在goods.vue组件上传入的food数据

css代码

.image-header

position: relative

width: 100%

height: 0

padding-top: 100% //这是一个css-hack技巧

img

position: absolute

top: 0

left: 0

width: 100% //图片撑满整个img的div

height: 100%

.back

position: absolute

top: 10px

left: 0

.icon-arrow_lift //返回按钮,使用的是icon的那个css

display: block

padding: