Vue实战—菜单栏商品展示数据交互（8）

<script>
// 导入BScroll 滚动组件
import BScroll from "better-scroll";
// 导入Food 商品页面
import Food from "components/Food/Food";
​
export default {
  data() { //准备需要的数据,初始化组件。
    return {
      container: {},
      goods: [],
      poiInfo: {},
      listHeight: [],
      scrollY: 0,
      menuScroll: {},
      foodScroll: {},
      selectedFood: {}
    };
  },
    //引用组件
  components: {
    BScroll,
    Food
  }
};
</script>

  created() {
    //通过that改变.then中的this指向
    var that = this;
​
    // 通过axios发起get请求
    this.$axios
      .get("/api/goods")
      .then(function(response) {
        // 获取到数据
        var dataSource = response.data;
        if (dataSource.code == 0) {
          that.container = dataSource.data.container_operation_source;
          that.goods = dataSource.data.food_spu_tags;
          that.poiInfo = dataSource.data.poi_info;
​
          // 调用滚动的初始化方法
          // that.initScroll();
          // 开始时，DOM元素没有渲染，即高度是问题
          // 在获取到数据后，并DOM已经被渲染，表示列表高度是没问题的
          // nextTick
          that.$nextTick(() => {
            // DOM已经更新
            that.initScroll();
​
            // 计算分类区间高度
            that.calculateHeight();
          });
        }
      })
      .catch(function(error) {
        // 出错处理
        console.log(error);
      });
  },

​
  methods: {
    head_bg(imgName) {
      return "background-image: url(" + imgName + ");";
    },
    // 滚动的初始化
    initScroll() {
      // ref属性就是用来绑定某个dom元素或某个组件，然后在this.$refs里面
      this.menuScroll = new BScroll(this.$refs.menuScroll, {
        click: true
      });
      this.foodScroll = new BScroll(this.$refs.foodScroll, {
        probeType: 3,
        click: true
      });
​
      // 添加滚动监听事件
      this.foodScroll.on("scroll", pos => {
        this.scrollY = Math.abs(Math.round(pos.y));
      });
    },
    calculateHeight() {
      // 通过$refs获取到对应的元素
      let foodlist = this.$refs.foodScroll.getElementsByClassName(
        "food-list-hook"
      );
​
      // 添加到数组区间
      // 0~216 第一个区间(专场)
      // 217~1342 第二个区间(热销)
      let height = 0;
      this.listHeight.push(height);
      for (let i = 0; i < foodlist.length; i++) {
        let item = foodlist[i];
​
        // 累加
        height += item.clientHeight;
​
        this.listHeight.push(height);
      }
    },
    selectMenu(index) {
​
      let foodlist = this.$refs.foodScroll.getElementsByClassName(
        "food-list-hook"
      );
​
      // 根据下标，滚动到相对应的元素
      let el = foodlist[index];
      // 滚动到对应元素的位置
      this.foodScroll.scrollToElement(el, 250);
    }
  },

​
  computed: {
    currentIndex() {
      // 根据右侧滚动位置，确定对应的索引下标
      for (let i = 0; i < this.listHeight.length; i++) {
        // 获取商品区间的范围
        let height1 = this.listHeight[i];
        let height2 = this.listHeight[i + 1];
​
        // 是否在上述区间中
        if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
          return i;
        }
      }
​
      return 0;
    }
  },