food商品详情页

点击goods组件中的li会进入此商品的详情页

新建food组件
在goods.vue中引入
当我们在设置方法的时候父组件是可以调用子组件方法的，子组件不能调用父组件方法

传入当前选中的食物作为参数，用ref属性可以获取子组件的事件
<food :food="selectedFood" ref="food"></food>
当点击当前食物的时候会进入详情页
<li @click="selectFood(food,$event)" v-for="food in item.foods" class="food-item border-1px">
data() {
  return {
    selectedFood: {}
  }
},
methods: {
  selectFood(food,event){
        if(!event._constructed){
            return;//只有当自己定义的点击事件才能触发
        }
        this.selectedFood = food;
        this.$refs.food.show();获取子组件的show方法
    },
}

子组件food.vue

<template>
    <div v-show="showFlag" class="food">
        
    </div>
</template>
<script>
export default {
    props: {
        foods: {
            type: Object
        }
    },
    data() {
        return {
            showFlag: false
        }
    },
    methods: {
    //可以被外部组件调用不带下划线命名，带下划线只能内部调用，私有方法
        show() {
            this.showFlag = true;
        }
    }
}
</script>
<style lang="stylus">
.food 
    position: fixed
    left: 0
    top: 0
    bottom: 48px
    z-index: 30
    width: 100%
    background: #fff
</style>

给详情页进入增加动画

<transition name="move"></transition>
.food 
    position: fixed
    left: 0
    top: 0
    bottom: 48px
    z-index: 30
    width: 100%
    background: #fff
    &.move-enter-active,&.move-leave-active
        transition: all 0.2s linear
    &.move-enter,&.move-leave-active
        transform: translate3d(100%, 0,0 )

图片高度自适应

padding以及margin的上下，参考的是容器的宽度。注意不是容器的高度。
容器使用width:100% ，这样容器的高度由padding-top撑开

    <transition name="move">
        <div v-show="showFlag" class="food">
            <div class="food-content">
                <div class="image-header">
<!-- 图片加载是个异步过程 -->
<!-- 高度不能写死，高度和屏幕宽度是一致的，
屏幕宽未知，如果不设置高度，整个页面加载就会有一个抖动的过程
，优化的的方法就是先把宽高设置好了-->
                    <img :src="food.image">
                </div>
            </div>
        </div>
    </transition>
-------------------------------------------------------------------------------
    .image-header
        position: relative
        width: 100% 和屏幕宽度保持一致
        height: 0 
        padding-top:100% 值的计算相对于盒子的宽度计算的，保证宽高相等
        img
            position: absolute
            top: 0
            left: 0
            width: 100%
            height: 100%

64$J{2G9%TF2B9$(W5FN%LG.png

给详情页设置返回按钮

<div class="back" @click="hide">
    <i class="icon-arrow_lift"></i>
</div>
.back
    position: absolute
    top: 10px
    left: 0
    .icon-arrow_lift
        display: block
        padding: 10px
        font-size: 20px
        color: #fff
methods: {
    //可以被外部组件调用不带下划线命名，带下划线只能内部调用，私有方法
        show() {
            this.showFlag = true;
        },
        hide() {
            this.showFlag = false
        }
    }

用better-scroll滚动页面，不显示滚动条

<div v-show="showFlag" class="food" ref="food"></div>
methods:{
    show() {
            this.showFlag = true;
            this.$nextTick(() => {
                //dom渲染完成后执行
                    //因为这个组件会多次show
                if(!this.scroll){
                    this.scroll = new BScroll(this.$refs.food,{
                        click: true
                    })
                }else{
                    this.scroll.refresh();
                }
            })
        }
}

子组件通知父组件

• 子组件：

select(type,event) {
    if(!event._constructed){
        return
    }
    //当点击按钮的时候，把selectType设置成我们传入的type
    // 当子组件selectType发生变化的时候要通知父组件
    this.$emit('selecttype',type)
},
toggleContent(event) {
    if(!event._constructed){
        return
    }
    this.$emit('content');
}

• 父组件：

@selecttype="setType" @content="setOnlycontent"
-----------------------------------------------------------------------------------
<ratingselect :select-type="selectType" :only-content="onlyContent" :desc="desc" :ratings="food.ratings" @selecttype="setType" @content="setOnlycontent"></ratingselect>
-------------------------------------------------------------------------------------
methods: {
  setType(type) {
        this.selectType = type;
        //手动刷新better-scroll重新计算页面高度
        this.$nextTick(() => {
          this.scroll.refresh();
        });
      },
      //手动刷新better-scroll重新计算页面高度
     setOnlycontent() {
        this.onlyContent = !this.onlyContent;
        this.$nextTick(() => {
          this.scroll.refresh();
        });
      },
}