基于vue实现swipe分页组件实例


Posted in Javascript onMay 25, 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;
  }
}

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

Javascript 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
JQuery 无废话系列教程(一) jquery入门 [推荐]
Jun 23 Javascript
JS基础之undefined与null的区别分析
Aug 08 Javascript
extjs4 treepanel动态改变行高度示例
Dec 17 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
May 29 Javascript
使用jquery prev()方法找到同级的前一个元素
Jul 11 Javascript
jQuery关键词说明插件cluetip使用指南
Apr 21 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
Jan 07 Javascript
vue-router 组件复用问题详解
Jan 22 Javascript
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
swiper Scrollbar滚动条组件详解
Sep 08 Javascript
JavaScript 判断浏览器是否是IE
Feb 19 Javascript
Javascript 实现匿名递归的实例代码
May 25 #Javascript
Kotlin学习第一步 kotlin语法特性
May 25 #Javascript
jQuery Masonry瀑布流布局神器使用详解
May 25 #jQuery
jQuery模拟实现天猫购物车动画效果实例代码
May 25 #jQuery
jquery.masonry瀑布流效果
May 25 #jQuery
Node.js操作redis实现添加查询功能
May 25 #Javascript
浅谈struts1 &amp; jquery form 文件异步上传
May 25 #jQuery
You might like
PHP Ajax实现页面无刷新发表评论
2007/01/02 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
一些常用的Javascript函数
2006/12/22 Javascript
javascript IE中的DOM ready应用技巧
2008/07/23 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
2013/12/17 Javascript
JS对象转换为Jquery对象实现代码
2013/12/29 Javascript
JavaScript中的eval()函数使用介绍
2014/12/31 Javascript
jquery实现图片轮播器
2017/05/23 jQuery
jQuery 改变P标签文本值方法
2018/02/24 jQuery
JS字符串去除连续或全部重复字符的实例
2018/03/08 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
用Python实现协同过滤的教程
2015/04/08 Python
详解Python中expandtabs()方法的使用
2015/05/18 Python
使用pandas对两个dataframe进行join的实例
2018/06/08 Python
75条笑死人的知乎神回复,用60行代码就爬完了
2019/05/06 Python
利用python计算windows全盘文件md5值的脚本
2019/07/27 Python
Python Subprocess模块原理及实例
2019/08/26 Python
Python使用Pygame绘制时钟
2020/11/29 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
CSS3 新增选择器的实例
2019/11/13 HTML / CSS
天猫精选:上天猫,就够了
2016/09/21 全球购物
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
广州某公司软件工程师面试题
2014/12/22 面试题
大学生毕业自我鉴定范文
2014/02/03 职场文书
纪律教育学习心得体会
2014/09/02 职场文书
办公室岗位职责范本
2015/04/11 职场文书
2016高一新生军训心得体会
2016/01/11 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers