Vue+Koa2移动电商实战 (五)mock数据使用和布局

前面我们已经获取到了数据,这节我们就好把它用到我们的项目中来。这节课我们主要是使用flex布局和for循环是我们的type_bar展示出来。

关于flex布局的话如果还不是很了解的小伙伴儿可以查阅下阮一峰大神的博客(http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)

首页商品分类栏的布局

HTML:

  我们采用v-for的方式将商品分类栏循环出来,并给了每个图片百分之九十的宽度,我这里因为第一张图片格式不对,多以单独添加了宽度的

<div class="type_bar">
        <div v-for="(item,index) in category" :key="index">
            <img v-lazy="item.image" width="90%">
            <span>{{item.mallCategoryName}}</span>
        </div>
    </div>

 CSS:

/* type_bar*/
.type_bar{
    background: #fff;
    margin: 0.3rem .3rem .3rem;
    border-radius: .3rem;
    font-size: 14px;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
}
.type_bar>div{
    padding: .3rem;
    font-size: 12px;
    text-align: center
}
.type_bar>div>img:nth-child(1){
    width: 3.3rem;
}

 javascript:

        .then(Response => { /*我们的方法都写在这里*/
          console.log(Response)
          if (Response.status == 200) {
            this.category = Response.data.data.category
            console.log(this.category)
          }
        })

  在这里我们需要注意一点的是我们是这里使用的 this.category 的category需要在我们的return里面注册,后面我们使用的对象参数也是同样的道理

广告栏

   <!-- advertes Picture -->
    <div class="advertes_picture">
        <img v-lazy=‘advertesPicture.PICTURE_ADDRESS‘ width="100%">
    </div>

//js我就直接写在这里了  主要就是从服务端获取到,然后渲染到我们前端

  this.advertesPicture = Response.data.data.advertesPicture

改写我们的swiper轮播组件

    <!-- swiper area -->
    <div class="swiper_area">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(banner, index) in slides" :key="index">
          <img v-lazy="banner.image" width="100%" height="167px">
        </van-swipe-item>
      </van-swipe>
    </div>

js:

  this.slides = Response.data.data.slides;   //获取到图片

在HTML中我们只需要修改我们原来自己添加的假数据换成我们从mock获取到的数据就好啦。这样我们就完成了这节的内容,mock数据的获取

使用flex布局进行分类栏的布局以及我们的swipe的改造。很高兴又学完了一节   简直美滋滋

原文地址:https://www.cnblogs.com/yang656/p/10013802.html

时间: 2024-11-08 05:24:30

Vue+Koa2移动电商实战 (五)mock数据使用和布局的相关文章

Vue.js+Koa2移动电商实战6

首页轮播图的制作 1.按需加载Swipe组件 按照惯例我们在使用Vant组件时需要把组件import进来.在/src/main.js下按需引入,代码如下: import { Button, Row, Col ,Search , Swipe , SwipeItem } from 'vant' Vue.use(Button).use(Row).use(Col).use(Search).use(Swipe).use(SwipeItem) 引入成功后,就可以写轮播图代码了. 2.下载这三张图片 我们作轮

Vue.js+Koa2移动电商实战3

移动端屏幕适配基础 制作webapp时一个很关键的问题就是适配各种机型不同屏幕的大小,让每种机型上的布局看起来都尽量一样,这让很多小伙伴很是头疼.在这里我介绍一下我平时工作中常用的适配方案,当然适配方案有很多种,所以你有更好的方法,也可以使用或者大家一起交流. 常见移动web布局适配方法 固定高度,宽度百分比:这种方法只适合简单要求不高的webApp,几乎达不到大型项目的要求,属于过时的方法. Media Query(媒体查询):现在比较主流的适配方案,比如我们常用的样式框架Bootstrap就

laravel 5.5 《电商实战 》基础布局

我们需要为我们的项目构建一个基础的页面布局,布局文件统一存放在 resources/views/layouts 文件夹中,布局涉及的文件如下: app.blade.php —— 主要布局文件,项目的所有页面都将继承于此页面: _header.blade.php —— 布局的头部区域文件,负责顶部导航栏区块: _footer.blade.php —— 布局的尾部区域文件,负责底部导航区 我们先创建主要布局文件:resources/views/layouts/app.blade.php: $ mkd

跨境电商再现变局,有钱的加速布局,缺钱的追求盈利

如今资本市场和舆论媒体的注意力都集中到了共享经济上,对跨境电商的兴趣和关注度都已降温,导致不少跨境电商公司因没有新一轮资金进入而不得不向市场妥协,自去年408"政策变局"后,如今的跨境电商市场出现了明显的"市场变局"信号. 政策变局:408税改新政曾让跨境电商行业头疼不已,却成就了网易考拉的平稳成长 昨日,网易发布了17年Q1财报,其中电商业务表现依旧抢眼,净收入为24.6亿元人民币,同比增加63.2%,仍保持较快的增速.网易考拉的成长以得到了资本市场的关注,在Q1

主流电商平台商品零售数据

提供部分主流电商平台店铺和商品多维分析数据,以主流电商平台.政府开放数据.线下调研数据为基础,结合大数据分析技术,提供多维度的查询和分析,辅助企业.机构和政府用户进行市场研究和商务决策. 详情介绍 商品零售数据查询提供多维度的零售数据查询和分析,旨在帮助用户掌握商品零售的发展状况和趋势,剖析行业内部的结构组成,分析和对比地区的电商发展要素,辅助用户进行经济和商务决策. 看行情的时间范围2017年5-9月,查店品的时间范围2017年5-12月,覆盖部分主流电商平台. 点击访问查询平台:[http:

laravel 5.5 《电商实战 》安装应用

最近开始接触电商业务.公司打算采用lavarel做后端的开发,出于学习成本和时间的考虑.自己找到了一个不错的收费教程.这段时间会同步更新,分享自己的学习过程. 自己的开发环境,mac+nginx+mysql5.6+php7.1 注意,如果没有特别提示,分享中所有的命令执行都是在项目的根目录操作. 首先是版本的选择,因为要用于公司项目的开发,自己优先选择了LTS版本的laravel5.5 安装laravel很方便,直接输入指令 composer create-project laravel/lar

laravel 5.5 《电商实战 》辅助函数

Laravel 提供了很多 辅助函数,有时候我们也需要创建自己的辅助函数. 这里介绍了 tinker,一个laravel内置的php交互式控制台,方便调试php代码 php artisan tinker 我们把所有的『自定义辅助函数』存放于 bootstrap/helpers.php 文件中 首先 touch bootstrap/helpers.php 然后在 编辑 composer.json 文件 "autoload": { "classmap": [ "

03-Flutter移动电商实战-底部导航栏制作

1.cupertino_IOS风格介绍 在Flutter里是有两种内置风格的: material风格: Material Design 是由 Google 推出的全新设计语言,这种设计语言是为手机.平板电脑.台式机和其他平台提供一致,更广泛的外观和感觉.我喜欢称它为纸墨设计.Material Design 风格是一种非常有质感的设计风格,并会提供一些默认的交互动画. cupertino风格:即 IOS 风格组件,它重现了很多经典的有 IOS 特性的交互和界面风格,让适用于 IOS 的人感觉亲切和

12-Flutter移动电商实战-首页导航区域编写

1.导航单元素的编写 从外部看,导航是一个GridView部件,但是每一个导航又是一个上下关系的Column.小伙伴们都知道Flutter有多层嵌套的问题,如果我们都写在一个组件里,那势必造成嵌套严重,不利于项目以后的维护工作.所以我们单独把每一个自元素导航拿出来,一个方法,返回一个组件. 代码如下:详细的解释可以观看视频. class TopNavigator extends StatelessWidget {  final List navigatorList;  TopNavigator(