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 相关文章推荐
一些mootools的学习资源
Feb 07 Javascript
Javascript 多浏览器兼容总结(实战经验)
Oct 30 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 Javascript
js实现滑动触屏事件监听的方法
May 05 Javascript
javascript简单实现滑动菜单效果的方法
Jul 27 Javascript
微信小程序 地图map详解及简单实例
Jan 10 Javascript
nginx配置React静态页面的方法教程
Nov 03 Javascript
基于vue2.0动态组件及render详解
Mar 17 Javascript
微信小程序实现红包雨功能
Jul 11 Javascript
详解ES6中的Map与Set集合
Mar 22 Javascript
vue实现简单瀑布流布局
May 28 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
如何使用PHP往windows中添加用户
2006/12/06 PHP
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
php使用文本统计访问量的方法
2016/05/12 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
php实现算术验证码功能
2018/12/05 PHP
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
javascript面向对象快速入门实例
2015/01/13 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
fullCalendar中文API官方文档
2017/02/07 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
Node.js Express安装与使用教程
2018/05/11 Javascript
[01:37]TI4西雅图DOTA2前线报道 VG拿下首胜教练357给出获胜秘诀
2014/07/10 DOTA
python中self原理实例分析
2015/04/30 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
Pytorch提取模型特征向量保存至csv的例子
2020/01/03 Python
python标准库os库的函数介绍
2020/02/12 Python
Django values()和value_list()的使用
2020/03/31 Python
scrapy头部修改的方法详解
2020/12/06 Python
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
PHP面试题及答案二
2015/05/23 面试题
应届大专毕业生个人自荐信
2013/09/22 职场文书
承认错误的检讨书
2014/01/30 职场文书
销售主管岗位职责
2014/02/08 职场文书
绘画专业自荐信范文
2014/02/23 职场文书
仓库规划计划书
2014/04/28 职场文书
勤奋学习演讲稿
2014/05/10 职场文书
小学教师师德师风个人整改措施
2014/09/18 职场文书
区政府领导班子个人对照检查材料
2014/09/25 职场文书
合作协议书模板2014
2014/09/26 职场文书
思想品德评语大全
2014/12/31 职场文书
结婚老公保证书
2015/02/26 职场文书
解决thinkphp6(tp6)在状态码500下不报错,或者显示错误“Malformed UTF-8 characters”的问题
2021/04/01 PHP
python套接字socket通信
2022/04/01 Python