Vue中如何实现轮播图的示例代码


Posted in Javascript onJuly 27, 2017

这个功能我感觉在任何项目中都会涉及到,今天我就把我的实现方法跟大家分享一下,有不对的地方还请指出,我好更新。

下面是整体代码,我把轮播图单独做了一个组件,大家可以拿来就用,具体代码如下:

<template>
  <div class="content">
    <div class="focus">
     <!-- focus begin -->
     <swiper :options="swiperOption">
<!-- map是数组 这里我们用v-for把数据循环出来 -->
      <swiper-slide v-for="item in map">
       <a :href="item.i_route" rel="external nofollow" target="_blank">![](item.i_url)</a>
     </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
     </swiper>
     <!-- focus end -->
     </div>
  </div>
</template>

<script>
//下面我们引用两个插件,当然,在使用之前请先安装
//安装方法:npm install vue-awesome-swiper --save

 import VueAwesomeSwiper from 'vue-awesome-swiper'
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
 export default {
  data() {
   return {
    swiperOption: {
     autoplay: 5000,
     initialSlide: 1,
     loop: true,
     pagination: '.swiper-pagination',
     paginationClickable: true,
     onSlideChangeEnd: swiper => {
      //console.log('onSlideChangeEnd', swiper.realIndex)
     }
    }
   }
  },
  mounted () {
   this.bannerInfo();
  },
  components: {
   swiper,
   swiperSlide
  },
  methods: {
   //轮播图初始化
   bannerInfo() {
//通过接口获取图片数据
     this.$fetch('get/image/list').then(res => {
      if(res.errCode == 200) {
       this.map = res.errData;
      }
     });
   }
  }
 }

</script>

以上就是实现轮播图的全部代码,有兴趣的朋友可以试试看啦,希望大家继续关注我们的网站!想要学习VUE的可以继续关注本站。

Javascript 相关文章推荐
为开发者准备的10款最好的jQuery日历插件
Feb 04 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
Feb 26 Javascript
jquery实现浮动的侧栏实例
Jun 25 Javascript
node.js 中国天气预报 简单实现
Jun 06 Javascript
JS定时器用法分析【时钟与菜单中的应用】
Dec 21 Javascript
详解Vue 动态添加模板的几种方法
Apr 25 Javascript
Vue2.0 从零开始_环境搭建操作步骤
Jun 14 Javascript
React如何将组件渲染到指定DOM节点详解
Sep 08 Javascript
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
详解使用element-ui table组件的筛选功能的一个小坑
Nov 02 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
May 07 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
Nov 12 Javascript
基于构造函数的五种继承方法小结
Jul 27 #Javascript
vue中各组件之间传递数据的方法示例
Jul 27 #Javascript
微信小程序 页面跳转传值实现代码
Jul 27 #Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 #Javascript
关于JavaScript中forEach和each用法浅析
Jul 27 #Javascript
Easyui使用Dialog行内按钮布局的实例
Jul 27 #Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
Jul 27 #Javascript
You might like
PHP5 面向对象程序设计
2008/02/13 PHP
php.ini中date.timezone设置分析
2011/07/29 PHP
基于PHP CURL获取邮箱地址的详解
2013/06/03 PHP
php除数取整示例
2014/04/24 PHP
PHP实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
extjs4 treepanel动态改变行高度示例
2013/12/17 Javascript
JavaScript中读取和保存文件实例
2014/05/08 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
从零学习node.js之利用express搭建简易论坛(七)
2017/02/25 Javascript
原生JS实现Ajax跨域请求flask响应内容
2017/10/24 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
2020/08/31 Javascript
keep-alive保持组件状态的方法
2020/12/02 Javascript
[03:52]显微镜下的DOTA2第三期——英雄在无聊的时候干什么
2014/06/20 DOTA
简单学习Python多进程Multiprocessing
2017/08/29 Python
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
python实现人民币大写转换
2018/06/20 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
Python算法的时间复杂度和空间复杂度(实例解析)
2019/11/19 Python
Python基于paramunittest模块实现excl参数化
2020/04/26 Python
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
英国家用电器购物网站:Hughes
2018/02/23 全球购物
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
优秀员工自荐书
2013/12/19 职场文书
招聘与培训专员岗位职责
2014/01/30 职场文书
上班玩游戏检讨书
2014/02/07 职场文书
个人承诺书
2014/03/26 职场文书
公司委托书格式范文
2014/04/04 职场文书
资产运营委托书范本
2014/10/16 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
linux下导入、导出mysql数据库命令的实现方法
2021/05/26 MySQL