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

chnmagnus 发布于2019-08-23 18:39 / 1102人阅读

摘要：上篇我们将菜单栏，商品展示结构完成，本次我们为这两个部分接入数据。菜单栏接入数据导入组件，定义需要的数据格式导入滚动组件导入商品页面准备需要的数据初始化组件。

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

菜单栏接入数据

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

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

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

GPU云服务器云服务器菜单栏悬浮菜单栏底部菜单栏恢复菜单栏

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105622.html

webpack+vue项目实战（二，开发管理系统主页面）

摘要：运行一下，发现路由变了，当前项有标识了，子菜单的显示与隐藏也有了原理也很简单。 1.前言上篇文章(webpack+vue项目实战（一,搭建运行环境和相关配置）)搭建了好了基本的一个项目目录，安好好了一些要用到的依赖，以及把项目跑了起来。接下来，我们就进行第二步的操作，第二步就是做好一个开发系统的主页面，这个页面主要也就是一个侧边栏，通过侧边栏的各个选项来进行操作（切换各个组件）。比如...

Harpsichord1207 2019-08-20 17:43 评论0 收藏0
Vue实战-商品展示切图（7）

摘要：本篇我们将继续推进外卖项目商品页的展示。如图所示，我们可以把商品也面分为两大部分左侧菜单栏右侧商品展示为当前商品页面的根元素。下一篇文章我们开始为左侧菜单栏，右侧商品展示加入数据。上次我们通过设计评价组件这个过程，了解到了组件设计中的良好的习惯，比如，文件夹如何支撑组件，图片，组件路径的存放于设置。本篇我们将继续推进外卖项目—商品页的展示。 showImg(https://segm...

DirtyMind 2019-08-23 18:15 评论0 收藏0
前方来报，八月最新资讯--关于vue2&3的最佳文章推荐

摘要：哪吒别人的看法都是狗屁，你是谁只有你自己说了才算，这是爹教我的道理。哪吒去他个鸟命我命由我，不由天是魔是仙，我自己决定哪吒白白搭上一条人命，你傻不傻敖丙不傻谁和你做朋友太乙真人人是否能够改变命运，我不晓得。我只晓得，不认命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出处查看github最新的Vue...

izhuhaodev 2019-08-26 10:44 评论0 收藏0
vue轻量级后台管理系统基础模板

摘要：具体实现请查看和的退出登陆回调方法。现在除了必要的页面需要在一开始添加到路由表里，其他的页面都可以根据后台数据来自动生成。另外，如果在未登陆时要访问某一指定页面，会重定向到登陆页，登陆成功后会自动跳到这个指定页面。项目地址 vue-admin-template 在线预览更新 2019.6.25 更新修复路由表冲突问题退出当前用户，换账号重新登陆时，上个账号和现在的账号路由表会有...

2shou 2019-08-23 14:17 评论0 收藏0
webpack+vue项目实战（三，配置功能操作页和组件的按需加载）

摘要：但是实际上，回款管理和开票管理的组件文件也是加载了。所以下面引用按需加载来处理。是不是小很多了，然后和是按需加载的，就是需要的时候才加载。 1.前言上篇文章（webpack+vue项目实战（二，开发管理系统主页面）），实现了，侧边栏的一个操作，点击侧边栏的一些操作，最重要的就是路由的切换。看了上一篇的伙伴也不难发现，除了点击侧边栏‘首页’之外，点击其它的都是白色的一片。原因我想大家都...

endless_road 2019-08-20 17:46 评论0 收藏0