基于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 相关文章推荐
JS实现向表格中动态添加行的方法
Mar 30 Javascript
解决WordPress使用CDN后博文无法评论的错误
Dec 15 Javascript
jquery 抽奖小程序实现代码
Oct 12 Javascript
input输入密码变黑点密文的实现方法
Jan 09 Javascript
基于JS实现网页中的选项卡(两种方法)
Jun 16 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
在vscode中统一vue编码风格的方法
Feb 22 Javascript
vue组件与复用详解
Apr 08 Javascript
vue 的点击事件获取当前点击的元素方法
Sep 15 Javascript
node.js的http.createServer过程深入解析
Jun 06 Javascript
vue中使用vue-pdf的方法详解
Sep 05 Javascript
详解CocosCreator消息分发机制
Apr 16 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
当年上海收录机产品生产,进口和价格情况
2021/03/04 无线电
解决中英文字符串长度问题函数
2007/01/16 PHP
PHP的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
Prototype中dom对象方法汇总
2008/09/17 Javascript
jquery实现显示已选用户
2014/07/21 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
2017/03/14 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
深入理解react-router@4.0 使用和源码解析
2017/05/23 Javascript
node中使用es5/6以及支持性与性能对比
2017/08/11 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
详解Vue的mixin策略
2020/11/19 Vue.js
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
python使用chardet判断字符串编码的方法
2015/03/13 Python
Python中正则表达式的详细教程
2015/04/30 Python
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
如何基于线程池提升request模块效率
2020/04/18 Python
Pygame的程序开始示例代码
2020/05/07 Python
工程专业求职自荐书范文
2014/02/08 职场文书
高中军训感言600字
2014/03/11 职场文书
学习两会精神心得范文
2014/03/17 职场文书
门前三包责任书
2014/04/15 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书
python pygame入门教程
2021/06/01 Python
Android开发手册Chip监听及ChipGroup监听
2022/06/10 Java/Android