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 相关文章推荐
Javascript中的for in循环和hasOwnProperty结合使用
Jun 05 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
Jun 06 Javascript
javascript中为某个元素指定事件的三种方式
Aug 07 Javascript
jQuery实现的导航下拉菜单效果示例
Sep 05 Javascript
javascript基础知识讲解
Jan 11 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
Oct 24 Javascript
分享ES6的7个实用技巧
Jan 18 Javascript
vue axios数据请求及vue中使用axios的方法
Sep 10 Javascript
微信公众号平台接口开发 获取access_token过程解析
Aug 14 Javascript
webpack 处理CSS资源的实现
Sep 27 Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 Javascript
react中hook介绍以及使用教程
Dec 11 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中异常处理方法小结
2015/01/09 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
浅谈php处理后端&amp;接口访问超时的解决方法
2016/10/29 PHP
php连接微软MSSQL(sql server)完全攻略
2016/11/27 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
等待指定时间后自动跳转或关闭当前页面的js代码
2013/07/09 Javascript
浅谈JavaScript Math和Number对象
2015/01/26 Javascript
获取input标签的所有属性的方法
2016/06/28 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
vue组件学习教程
2017/09/09 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
node.js的Express服务器基本使用教程
2019/01/09 Javascript
原生js实现下拉选项卡
2019/11/27 Javascript
python的unittest测试类代码实例
2017/12/07 Python
Python实现字典的遍历与排序功能示例
2017/12/23 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
降低python版本的操作方法
2020/09/11 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
中英双版中文教师求职信
2013/10/27 职场文书
《泉水》教学反思
2014/04/11 职场文书
写求职信要注意什么问题
2014/04/12 职场文书
2014年食堂工作总结
2014/11/20 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
初中团委工作总结
2015/08/13 职场文书
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
2021/06/23 Python
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python
MySQL Server层四个日志的实现
2022/03/31 MySQL
Redis keys命令的具体使用
2022/06/05 Redis
Python sklearn分类决策树方法详解
2022/09/23 Python