用vue写一个仿简书的轮播图的示例代码


Posted in Javascript onMarch 13, 2018

1.先展示最终效果:

用vue写一个仿简书的轮播图的示例代码

2.解决思路

Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果。写好css样式,只需改变每张图片的class即可实现轮播效果。动画效果交给transition完成。可以将轮播图看成两个(mainSlide和extraSlide),各个图片的位置如图所示:

用vue写一个仿简书的轮播图的示例代码

3.代码实现

各个slide的样式:

$width: 800px;   // 容器宽度
$height: 300px;   // 容器高度
$bWidth: 500px;   // 大图片宽度
$sWidth: $width - $bWidth; // 小图片宽度
$sHeight: $height / 2; // 小图片高度
#slider-wrapper{
  width: $width;
  height: $height;
  margin: 0 auto;
  cursor: pointer;
  background: #ddd;
  border-radius: 5px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.117647), 0 1px 4px rgba(0,0,0,0.117647);
  display: flex;
  overflow: hidden;
  div{
    display: inline-block;
  }
}
.main-slide{
  width: $bWidth;
  height: $height;
  float: left;
  transition: all .4s ease;
}
.extra-slide{
  width: $sWidth;
  position: relative;
  .extra-slide-item{
    position: absolute;
    width: $sWidth;
    height: $sHeight;
    left: 0;
    transition: .4s ease-out;
  }
  .extra-slide-top{
    top: -$sHeight;
  }
  .extra-slide-middle-first{
    top: 0;
    z-index: 2
  }
  .extra-slide-middle-second{
    top: $sHeight;
    z-index: 2
  }
  .extra-slide-bottom{
    top: $height
  }
  .extra-slide-hide{
    display: none!important;
  }
}

模板包含两个轮播图:

<div id="slider-wrapper" @mouseover="stop" @mouseout="start">
  <!-- 轮播图1,mainSlide -->
  <div class="main-slide" :style="`background: url(${slideConfig[nowIndex].src})`"></div>
  <!-- 轮播图2,extraSlide -->
  <div class="extra-slide">
    <div class="extra-slide-item" :class="slideClass(i)" v-for="(v, i) in slideConfig" :key="i" :style="`background: url(${v.src}); background-size: cover`"></div>
  </div>
</div>

scripts部分,设置一个nowIndex,定时改变nowIndex。所有图片的class根据这个nowIndex来变化,这里使用了es6的map类型,详情点击:https://3water.com/article/111734.htm

export default {
  name: 'slider',
  data: function() {  
    return {
      slideInterval: null,
      nowIndex: 0,
      slideLength: this.slideConfig.length
    }
  },
  props: {
    slideConfig: {
      type: Array
    }
  },
  methods: {
    // 限制index不能超出图片列表长度
    resetIndex(i) {
      return i > this.slideLength - 1 ? i - this.slideLength : i
    },
    slideClass(i) {
      let nowIndex = this.nowIndex
      // Map就是key也可以是非字符串的对象,不用Map多写几个 if else 也可以
      let map = new Map([
        [this.resetIndex(nowIndex), 'extra-slide-top'],
        [this.resetIndex(nowIndex + 1), 'extra-slide-middle-first'],
        [this.resetIndex(nowIndex + 2), 'extra-slide-middle-second'],
        [this.resetIndex(nowIndex + 3), 'extra-slide-bottom']
      ])
      // 图片的class根据nowIndex的变化而变化
      return map.get(i) ? map.get(i) : 'extra-slide-hide'
    },
    start() {
      // 定时改变nowIndex
      this.slideInterval = setInterval(() => {
        this.nowIndex = this.nowIndex > this.slideLength - 2 ? 0 : this.nowIndex + 1
        console.log(this.nowIndex)
      }, 2000)
    },
    stop() {
      clearInterval(this.slideInterval)
      this.slideInterval = null
    }
  },
  mounted() {
    this.start()
  },
  destroyed() {
    this.stop()
  }
}

slideConfig,组件的props:

const prefix = '/src/assets/'
const slideConfig = [{
 src: prefix + 's1.jpg',
 title: '图1',
 desc: '说明1'
}, {
 src: prefix + 's2.jpg',
 title: '图2',
 desc: '说明2'
}, {
 src: prefix + 's3.jpg',
 title: '图3',
 desc: '说明3'
}, {
 src: prefix + 's4.jpg',
 title: '图4',
 desc: '说明4'
}, {
 src: prefix + 's5.jpg',
 title: '图5',
 desc: '说明5'
}, {
 src: prefix + 's6.jpg',
 title: '图6',
 desc: '说明6'
}]
export default slideConfig

使用:

<slider :slideConfig="slideConfig" />

2018/3/12 16:55 : slideConfig已修改成Props,提取slider.vue就可以直接用了

gitHub传送门:https://github.com/bougieL/jianshuslider

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

Javascript 相关文章推荐
Jquery CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
Jan 17 Javascript
jquery滚动条插件jScrollPane的使用介绍
Nov 08 Javascript
js调试工具Console命令详解
Oct 21 Javascript
js实现简单折叠、展开菜单的方法
Aug 28 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
May 25 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
Aug 29 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
Oct 10 Javascript
微信小程序基于本地缓存实现点赞功能的方法
Dec 18 Javascript
Vue实现回到顶部和底部动画效果
Jul 31 Javascript
javascript实现固定侧边栏
Feb 09 Javascript
vue-cli脚手架引入图片的几种方法总结
Mar 13 #Javascript
解决vue-cli创建项目的loader问题
Mar 13 #Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 #Javascript
基于vue.js实现的分页
Mar 13 #Javascript
微信小程序中实现手指缩放图片的示例代码
Mar 13 #Javascript
基于vue中css预加载使用sass的配置方式详解
Mar 13 #Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
Mar 13 #Javascript
You might like
合作指挥官:孟斯克
2020/03/16 星际争霸
php的urlencode()URL编码函数浅析
2011/08/09 PHP
php实现的返回数据格式化类实例
2014/09/22 PHP
php使用curl打开https网站的方法
2015/06/17 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
2010/05/07 Javascript
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
javascript实现简单的贪吃蛇游戏
2015/03/31 Javascript
js判断上传文件后缀名是否合法
2016/01/28 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
JS中的==运算: [''] == false —&gt;true
2016/07/24 Javascript
详解webpack进阶之插件篇
2017/07/06 Javascript
原生js获取left值和top值的三种方法
2017/08/02 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
sublime text配置node.js调试(图文教程)
2017/11/23 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python发送邮件接收邮件示例分享
2014/01/21 Python
python获取指定网页上所有超链接的方法
2015/04/04 Python
Python多线程编程(三):threading.Thread类的重要函数和方法
2015/04/05 Python
python实现支持目录FTP上传下载文件的方法
2015/06/03 Python
python使用knn实现特征向量分类
2018/12/26 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
html5 制作地图当前定位箭头的方法示例
2020/01/10 HTML / CSS
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
奥巴马胜选演讲稿
2014/05/15 职场文书
小学运动会班级口号
2014/06/09 职场文书
幼儿园教师暑期培训心得体会
2016/01/09 职场文书
三严三实·严以用权心得体会
2016/01/12 职场文书
JS实现简单九宫格抽奖
2022/06/28 Javascript