有关饿了么Vue2.0与better-scroll结合问题

问题

设置了better-scroll但是界面仍然无法滚动

安装

npm i better-scroll -S

goods界面

<template>
  <div class="goods">
    <div class="menu-wrapper"
         ref="menuWrapper">
      <ul>
        <li v-for="(item,index) in goods"
            class="menu-item"
            :key="index">
          <span class="text border-1px">
            <span v-show="item.type>0"
                  class="icon"
                  :class="classMap[item.type]"></span>{{item.name}}
          </span>
        </li>
      </ul>
    </div>
    <div class="foods-wrapper"
         id="wrapper"
         ref="foodsWrapper">
      <ul>
        <li v-for="(item,index) in goods"
            :key="index"
            class="food-list">
          <h1 class="title">{{item.name}}</h1>
          <ul>
            <li v-for="(food,index) in item.foods"
                :key="index"
                class="food-item border-1px"
                @click="goDetail(food)">
              <div class="icon">
                <img width="57"
                     height="57"
                     :src="food.icon" />
              </div>
              <div class="content">
                <h2 class="name">{{food.name}}</h2>
                <p class="description"
                   v-show="food.description">{{food.description}}</p>
                <div class="sell-info">
                  <span class="sellCount">月售{{food.sellCount}}份</span>
                  <span class="rating">好评率{{food.rating}}%</span>
                </div>
                <div class="price">
                  <span class="newPrice"><span class="unit">￥</span>{{food.price}}</span>
                  <span v-show="food.oldPrice"
                        class="oldPrice">￥{{food.oldPrice}}</span>
                </div>
                <!-- <div class="cartcontrol-wrapper">
                  <cartcontrol :food="food"></cartcontrol>
                </div> -->
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

js

<script type="text/ecmascript-6">
import axios from 'axios';
import BScroll from 'better-scroll';
// const ERR_OK = 0;
export default {
  props: {
    seller: {
      type: Object
    }
  },
  data () {
    return {
      goods: []
    };
  },
  created () {
    this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
    axios.get('/api/goods').then((res) => {
      this.goods = res.data.data;
      this.$nextTick(() => {
        this._initScroll();
        this._calculateHeight();
      })
      console.log(this.$refs.menuWrapper)
    });
  },
  methods: {
    _initScroll () {
      this.menuWrapper = new BScroll(this.$refs.menuWrapper, {
        click: true
      });
      this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
        click: true,
        probeType: 3
      });
      // 监控滚动事件
      this.foodsScroll.on('scroll', (pos) => {
        this.foodsScrollY = Math.abs(Math.round(pos.y))
      })
    }
  }
};
</script>

better-scroll 对外暴露了一个 BScroll 的类，我们初始化只需要 new 一个类的实例即可。第一个参数就是我们 wrapper 的 DOM 对象，第二个是一些配置参数。

better-scroll 的初始化时机很重要，因为它在初始化的时候，会计算父元素和子元素的高度和宽度，来决定是否可以纵向和横向滚动。因此，我们在初始化它的时候，必须确保父元素和子元素的内容已经正确渲染了。如果没有办法滑动，那就是初始化的时机不对。

this.$nextTick()这个方法作用是当数据被修改后使用这个方法会回调获取更新后的dom再render出来如果不在下面的this.$nextTick()方法里回调这个方法，数据改变后再来计算滚动轴就会出错

参考文献

https://blog.csdn.net/keji_123/article/details/78809506