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 相关文章推荐
五段实用的js高级技巧
Dec 20 Javascript
javascript操作数组详解
Dec 17 Javascript
javascript正则表达式基础知识入门
Apr 20 Javascript
js 获取站点应用名的简单实例
Aug 18 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
Dec 15 Javascript
Bootstrap CSS组件之导航(nav)
Dec 17 Javascript
详解JS异步加载的三种方式
Mar 07 Javascript
jQuery事件对象的属性和方法详解
Sep 09 jQuery
详解vue-cli中的ESlint配置文件eslintrc.js
Sep 25 Javascript
JS实现对json对象排序并删除id相同项功能示例
Apr 18 Javascript
原生js实现照片墙效果
Oct 13 Javascript
如何使用JS console.log()技巧提高工作效率
Oct 14 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采用curl访问域名返回405 method not allowed提示的解决方法
2014/06/26 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
用cssText批量修改样式
2009/08/29 Javascript
jquery $.ajax相关用法分享
2012/03/16 Javascript
js树插件zTree获取所有选中节点数据的方法
2015/01/28 Javascript
jQuery+ajax实现文章点赞功能的方法
2015/12/31 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
React实现双向绑定示例代码
2016/09/19 Javascript
原生node.js案例--前后台交互
2017/02/20 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
vue通过watch对input做字数限定的方法
2017/07/13 Javascript
浅谈Vuejs Prop基本用法
2017/08/17 Javascript
Express进阶之log4js实用入门指南
2018/02/10 Javascript
Vue-cli3项目引入Typescript的实现方法
2019/10/18 Javascript
vue 开发之路由配置方法详解
2019/12/02 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
python简单商城购物车实例代码
2018/03/15 Python
解决python字典对值(值为列表)赋值出现重复的问题
2019/01/20 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
python ffmpeg任意提取视频帧的方法
2020/02/21 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
Python如何读取、写入CSV数据
2020/07/28 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
Pycharm2020最新激活码|永久激活(附最新激活码和插件的详细教程)
2020/09/29 Python
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
中国最大的团购网站:聚划算
2016/09/21 全球购物
澳洲在线厨具商店:Kitchen Style
2018/05/05 全球购物
小学生常见病防治方案
2014/06/06 职场文书
我们的节日春节活动方案
2014/08/22 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书
python文件目录操作之os模块
2021/05/08 Python
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技
在虚拟机中安装windows server 2008的图文教程
2022/06/28 Servers