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 相关文章推荐
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
Dec 27 Javascript
javascript 文章截取部分无损html显示实现代码
May 04 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
Jan 08 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 Javascript
JavaScript中的acos()方法使用详解
Jun 14 Javascript
各式各样的导航条效果css3结合jquery代码实现
Sep 17 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
Sep 18 Javascript
connection reset by peer问题总结及解决方案
Oct 21 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 Javascript
微信小程序与webview交互实现支付功能
Jun 07 Javascript
JavaScript执行机制详细介绍
Dec 06 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 高手之路(三)
2006/10/09 PHP
php异常处理方法实例汇总
2015/06/24 PHP
详谈php ip2long 出现负数的原因及解决方法
2017/04/05 PHP
解决Laravel5.2 Auth认证退出失效的问题
2019/10/14 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
2013/12/13 Javascript
网页实时显示服务器时间和javscript自运行时钟
2014/06/09 Javascript
JSON格式化输出
2014/11/10 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
Bootstrap Paginator分页插件使用方法详解
2016/05/30 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
domReady的实现案例
2016/11/23 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
2017/02/11 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
2019/04/08 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
python使用urlparse分析网址中域名的方法
2015/04/15 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
Python socket聊天脚本代码实例
2020/01/02 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
师生聚会感言
2014/01/26 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
空气的环保标语
2014/06/12 职场文书
公司员工活动策划方案
2014/08/20 职场文书
自动化专业大学生职业生涯规划范文:爱拚才会赢
2014/09/12 职场文书
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS
php实例化对象的实例方法
2021/11/17 PHP
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python