基于vue实现swipe轮播组件实例代码


Posted in Javascript onMay 24, 2017

项目背景

图片轮播是前端项目必有项,当前有很多效果很酷炫的轮播插件,例如Swiper。

但是当项目中的图片轮播只需要一个很简单的轮播样式,比如这样的

基于vue实现swipe轮播组件实例代码

我们引用这样一个110k的大插件,就大材小用了。再安利一下,swiper2.x和swiper3.x对移动和PC端支持情况如下图

基于vue实现swipe轮播组件实例代码

当当当当~~~

我们今天的主角登场了,thebird/Swipe,这个插件完成了图片轮播需要的基本功能,只有14.2k,真真的轻量级 啊。还有,还有

基于vue实现swipe轮播组件实例代码

翻译一下,就是俺们全支持,不管你是PC端(IE7+)还是移动端浏览器。此处应该有掌声,哈哈~

简而言之,就是当需要一个简单的轮播时,可以选用thebird/Swipe,自己写一个组件。

举个栗子,就是我实现的这个—— 基于vue实现swipe分页组件,移动端和PC端均适用哦。

Result

基于vue实现swipe轮播组件实例代码

Usage

一般情况,轮播图片因为是要经常换的,故在后台定制,定制内容如下

<div><a href=""><img src=" rel="external nofollow" rel="external nofollow" rel="external nofollow" "/></a></div>
<div><a href=""><img src=" rel="external nofollow" rel="external nofollow" rel="external nofollow" "/></a></div>
<div><a href=""><img src=" rel="external nofollow" rel="external nofollow" rel="external nofollow" "/></a></div>

没有定制,必须在代码里写的话,也是可以的,造一个data数组swipeInfo

<!--js-->
data:{
  swipeInfo:[{
    href:"http://www.baidu.com",
    imgSrc:""
  },{
    href:"http://www.baidu.com",
    imgSrc:""
  },{
    href:"http://www.baidu.com",
    imgSrc:""
  }]
},
components: {
  'swipe-module': require('pagination-swipe'),
},

在html中绑定该数据

<!--html-->
<swipe-module :swipeinfo="swipeInfo"></swipe-module>

pagination-swipe组件内容

按照swipe构造html框架,添加了pagination块

<!--template.html-->
<div v-el:swipe class='swipe bar-slider'>
  <div class='swipe-wrap'>
    <div v-for="item in swipeinfo"><a :href=item.href><img :src=item.imgSrc /></a></div>
  </div>
  <!-- 分页 -->
  <div class="pagination">
    <span class="swipe-pagination-switch swipe-active-switch" @click="slideToCur(0)"></span>
    <span class="swipe-pagination-switch" @click="slideToCur($index+1)" v-for="item in slideNum"></span>
  </div>
</div>

vue构造组件

//index.js
require('./style.less');
var Swipe = require('swipe');

Vue.component('pagination-swipe',{
  props: ['swipeinfo'],
  template: require('raw!./template.html'),
  data: function() {
    return {
      mySwipe: {},
      slideNum: {},
    };
  },
  ready: function() {
    var self = this;
    //获取子组件中分页小圈圈
    var slides = self.$els.swipe.getElementsByClassName('swipe-pagination-switch');
    self.mySwipe = new Swipe(self.$els.swipe, {
      startSlide: 0,
      continuous: true,
      speed: 1000,
      auto: 4000,
      stopPropagation: false,
      callback: function(index, elem) {
        //渲染分页小圈圈
        for (var i = 0; i < slides.length; i++) {
          if (i != index) {
            slides[i].style.opacity = "0.2";
            slides[i].style.background = "#000";
          } else {
            slides[index].style.opacity = "1";
            slides[index].style.background = "#ee3a4a";
          }
        }
      },
    });
    self.slideNum = self.mySwipe.getNumSlides() - 1;
  },
  methods: {
    //点击底部小圈圈,跳到其所对应页
    slideToCur: function(index) {
      var self = this;
      self.mySwipe.slide(index, 300);
    },
  }
});
<!--style.less-->
.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
  height: 200/@rem;
  .swipe-wrap {
    position: relative;
    overflow: hidden;
    height: 100%;
    div {
      float: left;
      width: 100%;
      position: relative;
      margin: 0;
      a {
        width: 100%;
        height: 100%;
        background-position: center 0;
        background-repeat: no-repeat;
        background-color: transparent;
        display: block;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .pagination {
    text-align: center;
    position: relative;
    bottom: 40/@rem;
    cursor: pointer;
  }
  .swipe-pagination-switch {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background: #000;
    opacity: 0.2;
    margin: 0 8px;
    z-index: 10;
    &:first-child {
      background: #ee3a4a;
    }
  }
  .swipe-active-switch {
    opacity: 1;
  }
}

相关推荐

目前基于vue有一个vue-swipe组件,亲测轻量简单易用,基本功能齐全,是做swipe轮播图很好的选择

但是这个有一些问题,

  1. 如果样式放在scoped中,底部小圈圈就不见了~所以,这个的样式使用需要注意样式污染问题.
  2. IE9下没有滑动效果,主要是ie9对css3动画的不兼容

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery购物车实时结算特效实现思路
Sep 23 Javascript
用jquery修复在iframe下的页面锚点失效问题
Aug 22 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
浅谈jquery高级方法描述与应用
Oct 04 Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 Javascript
javascript-解决mongoose数据查询的异步操作
Dec 22 Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
Nov 13 Javascript
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
ES6学习笔记之let与const用法实例分析
Jan 22 Javascript
vue实现列表拖拽排序的功能
Nov 02 Javascript
js实现分页功能
May 24 #Javascript
基于Vue的文字跑马灯组件(npm 组件包)
May 24 #Javascript
React简单介绍
May 24 #Javascript
bootstrap3使用bootstrap datetimepicker日期插件
May 24 #Javascript
微信小程序本地缓存数据增删改查实例详解
May 24 #Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
May 24 #Javascript
jquery Form轻松实现文件上传
May 24 #jQuery
You might like
PHP中::、-&amp;gt;、self、$this几种操作符的区别介绍
2013/04/24 PHP
PHP+MySQL插入操作实例
2015/01/21 PHP
使用PHP生成图片的缩略图的方法
2015/08/18 PHP
PHP模板引擎Smarty内建函数foreach,foreachelse用法分析
2016/04/11 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
用倒置滤镜把div倒置,再把table倒置。
2007/07/31 Javascript
jquery 锁定弹出层实现代码
2010/02/23 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
jquery判断输入密码两次是否相等
2020/04/22 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
微信小程序云开发之新手环境配置
2019/05/16 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
vue倒计时刷新页面不会从头开始的解决方法
2020/03/03 Javascript
在pycharm中开发vue的方法步骤
2020/03/04 Javascript
Python创建模块及模块导入的方法
2015/05/27 Python
Python使用Scrapy爬取妹子图
2015/05/28 Python
python cx_Oracle模块的安装和使用详细介绍
2017/02/13 Python
python实现彩票系统
2020/06/28 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
python的turtle库使用详解
2019/05/10 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
python字符串下标与切片及使用方法
2020/02/13 Python
Delphi笔试题
2016/11/14 面试题
爱心捐款倡议书
2014/04/14 职场文书
市级优秀班主任事迹材料
2014/05/13 职场文书
银行员工犯错检讨书
2014/09/16 职场文书
2015年食堂工作总结报告
2015/04/23 职场文书
辩论会主持词
2015/07/03 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书
2016年七夕爱情寄语
2015/12/04 职场文书
2016天猫双十一广告语
2016/01/28 职场文书
python 利用 PIL 将数组值转成图片的实现
2021/04/12 Python