博客
关于我
vue_cli轮播图--swiper插件
阅读量:380 次
发布时间:2019-03-05

本文共 1574 字,大约阅读时间需要 5 分钟。

vue_cli轮播图

轮播图–swiper插件

<template>  <div class="app-banner">  <!--swiper的bug,如果数据是从网络获取的, 那么自动轮播到最后一页之后就不轮播了-->  <!--只需要在swiper组件上面加上v-if="数据.length > 0"-->  <!--<swiper :options="swiperOption" class="banner" v-if="banners.length > 0">-->    <swiper :options="swiperOption">      <swiper-slide>        <img class="img" src="../assets/images/banner01.jpg" alt="">      </swiper-slide>      <swiper-slide>        <img class="img" src="../assets/images/banner02.jpg" alt="">      </swiper-slide>      <swiper-slide>        <img class="img" src="../assets/images/banner03.jpg" alt="">      </swiper-slide>      <!-- 分页器 -->      <div class="swiper-pagination" slot="pagination"></div>    </swiper>  </div></template><script>// import 'swiper/swiper-bundle.css'import 'swiper/dist/css/swiper.css'import {    swiper, swiperSlide } from 'vue-awesome-swiper'export default {     name: 'AppBanner',  data () {       return {         swiperOption: {           loop: true, // 循环模式选项        autoplay: {             delay: 1000,          stopOnLastSlide: false, // 当切换到最后一个slide时停止自动切换          disableOnInteraction: false // 用户操作swiper之后,是否禁止aotoplay        },        // 如果需要分页器        pagination: {             el: '.swiper-pagination'        },        observer: true,        observeParents: true,        observeSlideChildren: true      }    }  },  components: {       swiper,    swiperSlide  }}</script><style lang="scss">  .app-banner{       margin-top: 20px;    .img{         width: 100%;      height: 250px;      border-radius: 10px;      box-sizing: border-box;    }  }</style>

结果
在这里插入图片描述

转载地址:http://gxhg.baihongyu.com/

你可能感兴趣的文章
MySQL分组查询
查看>>
Mysql分表后同结构不同名称表之间复制数据以及Update语句只更新日期加减不更改时间
查看>>
mySql分页Iimit优化
查看>>
MySQL分页查询
查看>>
mysql列转行函数是什么
查看>>
mysql创建函数报错_mysql在创建存储函数时报错
查看>>
mysql创建数据库和用户 并授权
查看>>
mysql创建数据库指定字符集
查看>>
MySql创建数据表
查看>>
MySQL创建新用户以及ERROR 1396 (HY000)问题解决
查看>>
MySQL创建用户与授权
查看>>
MySQL创建用户报错:ERROR 1396 (HY000): Operation CREATE USER failed for 'slave'@'%'
查看>>
MySQL创建索引时提示“Specified key was too long; max key length is 767 bytes”
查看>>
mysql初始密码错误问题
查看>>
mysql判断某一张表是否存在的sql语句以及方法
查看>>
mysql加入安装策略_一键安装mysql5.7及密码策略修改方法
查看>>
mysql加强(1)~用户权限介绍、分别使用客户端工具和命令来创建用户和分配权限
查看>>
mysql加强(3)~分组(统计)查询
查看>>
mysql加强(4)~多表查询:笛卡尔积、消除笛卡尔积操作(等值、非等值连接),内连接(隐式连接、显示连接)、外连接、自连接
查看>>
mysql加强(5)~DML 增删改操作和 DQL 查询操作
查看>>