基于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 相关文章推荐
js中的window.open返回object的错误的解决方法
Aug 15 Javascript
FileUpload上传图片(图片不变形)
Aug 05 Javascript
js模拟select下拉菜单控件的代码
May 08 Javascript
js/jquery去掉空格,回车,换行示例代码
Nov 05 Javascript
jQuery中nextAll()方法用法实例
Jan 07 Javascript
javascript轮播图算法
Oct 21 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
jquery实现页面加载效果
Feb 21 Javascript
jQuery插件ContextMenu自定义图标
Mar 15 Javascript
vue组件编写之todolist组件实例详解
Jan 22 Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 Javascript
js+css实现扇形导航效果
Aug 18 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读取文件内容后清空文件示例代码
2014/03/18 PHP
destoon复制新模块的方法
2014/06/21 PHP
PHP获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
详解WordPress开发中过滤属性以及Sql语句的函数使用
2015/12/25 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
laravel csrf排除路由,禁止,关闭指定路由的例子
2019/10/21 PHP
onpropertypchange
2006/07/01 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
2010/11/25 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
javascript实现在网页中运行本地程序的方法
2016/02/03 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
2018/05/16 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
extjs图形绘制之饼图实现方法分析
2020/03/06 Javascript
[01:01:42]Secret vs Optic Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
详解python单例模式与metaclass
2016/01/15 Python
python获取当前运行函数名称的方法实例代码
2017/04/06 Python
Python3简单爬虫抓取网页图片代码实例
2019/08/26 Python
详解python实现可视化的MD5、sha256哈希加密小工具
2020/09/14 Python
Python基于unittest实现测试用例执行
2020/11/25 Python
CSS3 边框效果
2019/11/04 HTML / CSS
美国环保妈妈、儿童和婴儿用品购物网站:The Tot
2019/11/24 全球购物
销售自我评价
2013/10/22 职场文书
大学迎新晚会主持词
2014/03/24 职场文书
2014年教师业务学习材料
2014/05/12 职场文书
财务工作犯错检讨书
2014/10/07 职场文书
公务员政审材料
2014/12/23 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书
JS中如何优雅的使用async await详解
2021/10/05 Javascript