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作用域容易记错的两个地方分析
Jun 22 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
Mar 17 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
Apr 23 Javascript
jquery数组过滤筛选方法grep()简介
Jun 06 Javascript
微信中一些常用的js方法汇总
Mar 12 Javascript
JavaScript中的DSL元编程介绍
Mar 15 Javascript
JavaScript使用yield模拟多线程的方法
Mar 19 Javascript
jQuery提示插件alertify使用指南
Apr 21 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
Jan 27 Javascript
Vue中的验证登录状态的实现方法
Mar 09 Javascript
开发中常用的25个JavaScript单行代码(小结)
Jun 28 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
Apr 27 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
浅谈电磁辐射对健康的影响
2021/03/01 无线电
php中批量修改文件后缀名的函数代码
2011/10/23 PHP
PHP查询网站的PR值
2013/10/30 PHP
php实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
PHP操作MySQL的mysql_fetch_* 函数的常见用法教程
2015/12/25 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
Javascript里使用Dom操作Xml
2006/09/20 Javascript
在父页面调用子页面的JS方法
2013/09/29 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
JavaScript 开发工具webstrom使用指南
2014/12/09 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
jquery图片倾斜层叠切换特效代码分享
2015/08/27 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
深入理解Webpack 中路径的配置
2017/06/17 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
Javascript实现鼠标移入方向感知
2020/06/24 Javascript
Python fileinput模块使用实例
2015/05/28 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
Django CBV类的用法详解
2019/07/26 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
python中调试或排错的五种方法示例
2019/09/12 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
单身旅行者的单身假期:Just You
2018/04/08 全球购物
sort命令的作用和用法
2013/08/25 面试题
金融管理专业求职信
2014/07/10 职场文书
css背景和边框标签实例详解
2021/05/21 HTML / CSS
vue2实现provide inject传递响应式
2021/05/21 Vue.js