专栏首页大前端666Vue实战—菜单栏商品展示数据交互(8)
原创

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

之前我们说过在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/#vm-nextTick

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

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 当前 GitHub 上排名前十的热门 Vue 项目

    Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。通过基础的 24 分栏,迅速简便地...

    疯狂的技术宅
  • 从零到部署:用 Vue 和 Express 实现迷你全栈电商应用(七)

    在之前的六篇教程中我们已经基本实现了迷你全栈电商应用,相信大家对于一个全栈应用的开发已经有了一个全面的认知。但是一个追求完美的工程师是不会吝啬他的艺术创造,仅仅...

    一只图雀
  • 美团外卖美食知识图谱的迭代及应用

    菜品是外卖交易过程的核心要素,对菜品的理解也是实现外卖供需匹配的重点。今天我们将一次推送三篇文章,系统地介绍了美团外卖美食知识图谱的构建和应用。《美团外卖美食知...

    美团技术团队
  • 记录下:订单模块初步完成

    哇,好久没有记录自己写代码的总结了,今天记录下,点赞,订阅,转发,感谢各位老铁的支持与厚爱。

    公众号---人生代码
  • APICloud AVM多端开发 | 手把手教外卖点餐App开发(下)

    这个页面是一个左右分栏的布局。左边是菜单分类,右边的菜品。 有一组比较常见的交互:

    APICloud官方
  • 基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用

    前言 初学vue时曾在网上搜索vue的实战项目源码,无奈大部分都是简单的demo,对于深究vue没有太大的帮助,剩下的一些大部分都是像音乐播放器之类的展示型项目...

    IMWeb前端团队
  • 基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用

    初学vue时曾在网上搜索vue的实战项目源码,无奈大部分都是简单的demo,对于深究vue没有太大的帮助,剩下的一些大部分都是像音乐播放器之类的展示型项目,交互...

    IMWeb前端团队
  • 为未来的SaaS应用提供新的交互及视觉设计

    云端软件即服务已代替传统笨重的桌面软件,打造优异的用户使用界面让你的应用脱颖而出已是势在必行之事,然而这也意味着诸多的挑战。 本文介绍给大家一些基本需要关注的点...

    前朝楚水
  • 产品需求文档:C端生鲜电商APP

    (1)在居民生活品质意识加强及物流产业发展日渐成熟的推动下,中国冷链物流市场规模不断扩大,2019年冷链物流市场规模已达3780亿元,并预计在2020年达到48...

    物流IT圈
  • 社区团购冷一冷

    疫情刺激下,国内社区团购平台一时间如雨后春笋般再次迅速冒头。大量资本的涌入,让这个赛道变得异常拥挤。要想脱颖而出,成为最终赢家,优质的商品、健全的供应链及高效的...

    刘旷
  • 推荐几个前后端快速开发开源项目

    经常性逛github,发现了一些优秀的开源项目,其中的框架及代码非常不错,现在给大家推荐三个快速开发平台。

    程序IT圈
  • 推荐3个开源的快速开发平台,前后端都有,项目经验又有着落了!

    经常性逛github,发现了一些优秀的开源项目,其中的框架及代码非常不错,现在给大家推荐三个快速开发平台。

    好好学java
  • 最全知乎专栏合集:编程、python、爬虫、数据分析、挖掘、ML、NLP、DL...

    上一篇文章《爬取11088个知乎专栏,打破发现壁垒》 里提到,知乎官方没有搜素专栏的功能,于是我通过爬取几十万用户个人主页所专注的专栏从而获取到11088个知乎...

    古柳_DesertsX
  • 【建议收藏】缺少 Vue3 和 Spring Boot 的实战项目经验?我这儿有啊!

    缺少 Vue3 和 Spring Boot 的实战项目经验?缺少学习项目和练手项目?我这儿有啊!

    程序员十三
  • 【建议收藏】缺少 Vue3 和 Spring Boot 的实战项目经验?我这儿有啊!

    缺少 Vue3 和 Spring Boot 的实战项目经验?缺少学习项目和练手项目?我这儿有啊!

    程序员十三
  • 一、二、开发准备

    Freshman
  • Django REST framework+Vue 打造生鲜超市(一)

    一、项目介绍 1.1.掌握的技术 Vue + Django Rest Framework 前后端分离技术 彻底玩转restful api 开发流程 Django...

    zhang_derek
  • 15 个优秀开源的 Spring Boot 学习项目,一网打尽!

    Spring Boot 算是目前 Java 领域最火的技术栈了,松哥年初出版的 《Spring Boot + Vue 全栈开发实战》迄今为止已经加印了 8 次,...

    江南一点雨
  • Django+Vue开发生鲜电商平台之6.使用Vue实现商品类别和商品数据前台显示

    Github和Gitee代码同步更新: https://github.com/PythonWebProject/Django_Fresh_Ecommerce;...

    cutercorley

扫码关注云+社区

领取腾讯云代金券