vuejs中better-scroll这个组件无效

Question

<template>

<transition name="drag">

<div v-show="showProduct" class="extrafood">

  <div ref="extra">

     <div class="food-main">

         <div class="food-img-wrapper">

            <div class="food-img"><img :src="food.image"></div>

            <div class="back" @click="hide"><img src="./return.png"></div>

         </div>

         <div class="food-content box">

             <div class="food-content">

                <h2 class="food-name" style="font-weight:700">{{food.name}}</h2>

               <div class="extra">

                  <span class="food-count">月售{{food.sellCount}}份</span>

                  <span>好评率{{food.rating}}%</span>

               </div>

             </div> 

              <div class="price">

                <span class="now">￥{{food.price}}</span>

                <span class="old" v-if="food.oldPrice>0">￥{{food.oldPrice}}</span>

              </div>                             

         </div>

         <div class="food-content box">

                <h2 class="food-description">商品介绍</h2>  

                <p class="food-info">{{food.info}}</p>    

                  <p class="food-info">{{food.info}}</p>  

                    <p class="food-info">{{food.info}}</p>     

         </div>

         <div class="food-content box">

            <div>

                <h2 class="food-description">商品评论</h2>  

            </div>       

         </div>

     </div>

  </div>

</div>     

</transition>  

</template>

<script type="text/ecmascript-6">

import BScroll from 'better-scroll'

export default {

  data: function () {

    return {

      showProduct: false

    }

  },

  props: {

    food: {

      type: Object

    }

  },

  methods: {

    show () {

      console.log(this.food)

      this.showProduct = true

      if (!this.scroll) {

        this.$nextTick(() => {

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

            click: true

          })

        })

      } else {

        this.scroll.refresh()

      }

    },

    hide () {

      this.showProduct = false

    }

  }

}

</script>

代码本身没有问题 而且better-scroll已经成功加载到div上了但是就是移动不了

Answer 1

可能是CSS设置有问题，我看了作者的实例和其他论坛的答案，发现把作者的scroll组件父元素的css以及scroll本身的css设置成和他一样就可以滚动了。

Answer 2

准确的说是  this.scroll.refresh() 无效 第二次第三次点击时无法滚动

Answer 3

解决了吗，请教下