用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 相关文章推荐
js Function类型
Dec 04 Javascript
在ASP.NET中使用JavaScript脚本的方法
Nov 12 Javascript
js 页面元素的几个用法总结
Nov 18 Javascript
javascript实现右侧弹出“分享到”窗口效果
Feb 01 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
Dec 12 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
详解vue使用$http服务端收不到参数
Apr 19 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
Apr 28 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
Jun 21 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 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
PHP Session_Regenerate_ID函数双释放内存破坏漏洞
2011/01/27 PHP
PHP遍历二维数组的代码
2011/04/22 PHP
thinkphp实现数组分页示例
2014/04/13 PHP
PHP关于htmlspecialchars、strip_tags、addslashes的解释
2014/07/04 PHP
php实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
PHP实现图片压缩
2020/09/09 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
2019/07/12 PHP
Prototype Object对象 学习
2009/07/12 Javascript
JavaScript 获取用户客户端操作系统版本
2009/08/25 Javascript
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
深入浅析JS的数组遍历方法(推荐)
2016/06/15 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
DOM 事件的深入浅出(二)
2016/12/05 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
js函数和this用法实例分析
2020/03/13 Javascript
tracking.js实现前端人脸识别功能
2020/04/16 Javascript
我所理解的JavaScript中的this指向
2020/09/04 Javascript
详解Vue中的watch和computed
2020/11/09 Javascript
Python的Bottle框架中获取制定cookie的教程
2015/04/24 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
Python如何使用paramiko模块连接linux
2020/03/18 Python
CSS类名支持中文命名的示例
2014/04/04 HTML / CSS
物理学专业自荐信
2014/06/11 职场文书
美化环境标语
2014/06/20 职场文书
普通党员整改措施
2014/10/24 职场文书
房屋租房协议书范本
2014/12/04 职场文书
美容院管理规章制度
2015/08/05 职场文书