上篇我们将菜单栏，商品展示结构完成，本次我们为这两个部分接入数据。

菜单栏接入数据

导入组件，定义需要的数据格式

<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钩子发起请求获取数据

之前我们说过在created钩子，mounted钩子内可以发起请求，请求需要的数据。本次我们在created钩子内发起get请求，获取数据

  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);      });  },

注意$nextTick()用法，在dom更新后。我们执行初始化滚动函数。

https://cn.vuejs.org/v2/api/#...

通过methods定义我们需要的方法

  • 通过head_bg(imgName)方法获取到商品的背景图片；
  • 方法initScroll()用来初始化滚动，https://cn.vuejs.org/v2/api/#ref;
  • calculateHeight()方法获取左侧每一个菜单栏目的元素；

  • 使用selectMenu()方法，在我们点击菜单后，右侧显示对应的商品信息；

    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属性绑定在左侧菜单栏，使菜单元素与右侧内容作为对应，展示给用户。

    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;   } },

以上我们完成了商品页面数据的交互，下一篇我们将加入商品控件，与购物车。