vue轮播图_用vue实现一个仿简书的轮播图

时间: 2018-04-10阅读: 92标签: vue

先展示最终效果:


解决思路:

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


代码实现:

各个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">
    <div class="main-slide" :style="background: url(${slideConfig[nowIndex].src})"></div>
    <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类型:

import slideConfig from './slideConfig'
const slideLength = slideConfig.length
export default {
    name: 'slider',
    data: function() {
return { slideConfig: slideConfig, slideInterval: null, nowIndex: 0 } }, methods: { resetIndex(i) { return i > slideLength - 1 ? i - slideLength : i }, slideClass(i) { let nowIndex = this.nowIndex 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'] ]) return map.get(i) ? map.get(i) : 'extra-slide-hide' }, start() { this.slideInterval = setInterval(() => { this.nowIndex = this.nowIndex > 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


gitHub传送门:https://github.com/bougieL/jianshuslider
原文地址:http://bougieblog.cn/article/54  


vue路由history模式_如何去除vue项目中的#

在使用vue-cli搭建的环境中,浏览器上URL地址中是存在#的,这是由于vue-router 默认 hash 模式,不难发现#的出现真的很丑陋。官网给出了如何使用history模式mode: history

vue watch监听对象的使用_实现首次不触发、深度监听

vue中的watch是一个对象,所以一定要当成对象来用,它有键-值组成,其中键就是你要监控的那个数据。这篇文章介绍:vue如何实现首次不触发watch,vue如何实现数据的深度监听?

vue内置指令大全_整理常用的Vue内置指令

整理vue常用的内置指令:v-bind指令、v-text指令、v- html指令、v-show指令、v-if指令、v-else 指令、v-else-if 指令、v-for 指令、v-on 指令、v-model 指令、v-once 指令、v-cloak指令、v-pre指令

你不知道的Vuejs - 使用ESLint检查代码质量

Javascript 是一门弱类型语言,所以语法检查变得尤为重要。因此对 Javascript 进行语法检查的工具应运而生,目前 ESLint 使用最为广泛。这篇将讲解如何将 ESLint 集成到我们的项目中。

vue扩展——使用vue插件添加全局方法属性

在使用vue构建一些大型项目的时候,会发现许多组件会共用到一些函数或常量,我们需要把它提取出来,每次需要的时候调用一次就可以了,避免每个组件都重新写再一篇的麻烦。

在Vue2.0中集成UEditor 富文本编辑器

在vue的’项目中遇到了需要使用富文本编辑器的需求,在github上看了很多vue封装的editor插件,很多对图片上传和视频上传的支持并不是很好,最终还是决定使用UEditor。

如何用vue制作一个探探滑动组件【转】

嗨,说起探探想必各位程序汪都不陌生(毕竟妹子很多),能在上面丝滑的翻牌子,探探的的堆叠滑动组件起到了关键的作用,下面就来看看如何用vue写一个探探的堆叠组件

Vue.js的组件中的slot和props

props是用来接收参数的 例如父组件向子组件传参 可以放在props中;插槽 slot分发模式主要用于在组件中插入标签或者组件之间的相互嵌套,个人认为如果组件中有需要单独定义的地方可以使用slot

在 VueJS应用中管理用户权限

在需要身份验证的前端应用里,我们经常想通过用户角色来决定哪些内容可见。比如,游客身份可以阅读文章,但注册用户或管理员才能看到编辑按钮。在前端中管理权限可能会有点麻烦。你之前可能写过这样的代码

Vue的理解:Vue.js新手入门指南

从一个从未接触过除HTML+CSS+JavaScript+JQuery以外的前端技术的人到现在可以独立使用Vue.js以及各种附属的UI库来开发项目,我总结了一些知识和经验想与大家分享。