基于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常见开发技巧详细整理
Jan 02 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
Apr 08 Javascript
js跳转页面方法实现汇总
Feb 11 Javascript
使用js实现一个可编辑的select下拉列表
Feb 20 Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
Sep 01 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
Jan 22 Javascript
Bootstrap模态框插入视频的实现代码
Jun 25 Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 Javascript
详解从vue-loader源码分析CSS Scoped的实现
Sep 23 Javascript
vue制作抓娃娃机的示例代码
Apr 17 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
CodeIgniter框架基本增删改查操作示例
2017/03/23 PHP
PHP实现json_decode不转义中文的方法
2017/05/20 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
js url传值中文乱码之解决之道
2009/11/20 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
jQuery的animate函数实现图文切换动画效果
2015/05/03 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
2016/08/11 Javascript
JS实现弹出下载对话框及常见文件类型的下载
2017/07/13 Javascript
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
angularjs通过过滤器返回超链接的方法
2018/10/26 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
python实现巡检系统(solaris)示例
2014/04/02 Python
Python内置函数 next的具体使用方法
2017/11/24 Python
Python面向对象之类的封装操作示例
2019/06/08 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
Python进程池Pool应用实例分析
2019/11/27 Python
Python3+SQLAlchemy+Sqlite3实现ORM教程
2021/02/16 Python
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
计算机网络毕业生自荐信
2013/10/01 职场文书
化学专业毕业生自荐信
2013/11/15 职场文书
六十岁生日答谢词
2014/01/10 职场文书
大学四年的个人自我评价
2014/01/14 职场文书
授权委托书范本
2014/04/03 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
党员三严三实心得体会
2014/10/13 职场文书
2015年国税春训心得体会
2015/03/09 职场文书
2016大学优秀学生干部事迹材料
2016/03/01 职场文书
七年级之开学家长寄语35句
2019/09/05 职场文书
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL