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.下载这三张图片

  我们作轮播图的三张图片,你可以先下载好。图片放到了七牛云上,你可以下载,也可以直接使用这些图片地址。

 开始制作轮播图

  首先我们在js部分写入一个data参数bannerPicArray,把图片地址放入到里边。
  /src/components/pages/ShoppingMall.vue

 data() {
        return {
            locationIcon: require(‘../../assets/images/location.png‘),
            bannerPicArray:[
                {imageUrl:‘http://7xjyw1.com1.z0.glb.clouddn.com/simleVueDemoPic001.jpg‘},
                {imageUrl:‘http://7xjyw1.com1.z0.glb.clouddn.com/simleVueDemoPic002.jpg‘},
                {imageUrl:‘http://7xjyw1.com1.z0.glb.clouddn.com/simleVueDemoPic003.jpg‘},
            ]
        }
    },

  模版文件如下

<!--swipwer area-->
<div class="swiper-area">
    <van-swipe :autoplay="1000">
        <van-swipe-item v-for="(banner,index) in bannerPicArray" :key="index">
            <img :src="banner.imageUrl" width="100%"/>
        </van-swipe-item>
    </van-swipe>
</div>

  CSS代码:

.swiper-area{
      width:20rem;
      clear:both;
  }

  这时候你会发现CSS样式并不是我们想要的效果,这主要是用Vant组件,他有一些默认的样式,所以我们要做一些CSS的修复操作。
  overflow: hidden;,clear:both;

 利用Vant实现图片轮播的懒加载

  引入Vant的图片懒加载组件,以后我们的项目中会有很多远程图片,所以启用图片懒加载是必须的,那正好我们这里第一次开始用远程图片,就在这里学一下图片的懒加载

import { Button, Row, Col ,Search , Swipe , SwipeItem , Lazyload  } from ‘vant‘
Vue.use(Button).use(Row).use(Col).use(Search).use(Swipe).use(SwipeItem).use(Lazyload)

  然后修改一下我们的template区域,加入v-lazy="banner.imageUrl"就可以图片的懒加了。

原文地址:https://www.cnblogs.com/xiaofandegeng/p/9084877.html

时间: 2024-10-09 03:56:04

Vue.js+Koa2移动电商实战6的相关文章

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

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

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

前面我们已经获取到了数据,这节我们就好把它用到我们的项目中来.这节课我们主要是使用flex布局和for循环是我们的type_bar展示出来. 关于flex布局的话如果还不是很了解的小伙伴儿可以查阅下阮一峰大神的博客(http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html) 首页商品分类栏的布局 HTML: 我们采用v-for的方式将商品分类栏循环出来,并给了每个图片百分之九十的宽度,我这里因为第一张图片格式不对,多以单独添加了宽度的 <d

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

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

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(

11-Flutter移动电商实战-首页_屏幕适配方案和制作

1.flutter_ScreenUtil插件简介 flutter_ScreenUtil屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理的布局. 插件会让你先设置一个UI稿的尺寸,他会根据这个尺寸,根据不同屏幕进行缩放,能满足大部分屏幕场景. github:https://github.com/OpenFlutter/flutter_ScreenUtil 这个轮子功能还不是很完善,但是也在一点点的进步,这也算是国内现在最好的Flutter屏幕适配插件了,又不足的地方你可以自己下载源码进行修改

Flutter移动电商实战 --(49)详细页_Stack制作底部工具栏

一直悬浮在最下面的 Stack层叠组件.里面用Row 可以横向布局 开始 stack如果想定位就要用position去定位. 修改return返回值的这个地方 大R刷新查看效果,可以看到固定的在左下角的测试的字样.一直固定在底部 做底部的固定栏widget 新建页面:在文件夹details_page/details_bottom.dart 在布局用三个InkWell 因为都是可以点击的 加入购物车的InkWell 立即购买,复制购物车的InkWell改改就可以了. 引用这个组件 效果展示 最终代