Vue 实现从小到大的横向滑动效果详解


Posted in Javascript onOctober 16, 2019

本文实例讲述了Vue 实现从小到大的横向滑动效果。分享给大家供大家参考,具体如下:

最近项目中遇到一个需求,需要实现横向滑动,并且在滑动过程中,中间的大,两边的小,通过参考其他的人代码以及自己的实践,终于做出来啦,给大家做个参考。

实现效果如下图:

Vue 实现从小到大的横向滑动效果详解

先来说一下实现思路吧:

整体思路:采用vue+vue-awesome-swiper完成

因为我们的项目是采用vue来做的,所以在经过很多的考量和比较以后,选择了vue-awesome-swiper插件来辅助,从这个名字上也能看出,这个插件是支持vue的,使用起来也非常方便。

第一步:下载插件vue-awesome-swiper

可以在命令行直接下载,下载命令:npm install vue-awesome-swiper --save,进行全局保存,下载完成后查看一下你下载的版本,我下载后版本是3.1.3,不同的版本之间可能使用上会有一点细微的差别,可以参考官方文档。

第二步:在vue文件中引入插件

第一步安装成功后,插件就可以在vue中使用啦,在这里有两种引入方法。

  • 第一种,全局引入

打开main.js文件,在里面加入以下代码,这样在后面开发单独的vue文件的时候,就不需要再去单独导入了,这里路径是固定的,直接复制就可以,这里的common.css是自己实现的,这个文件的用处后面讲。

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import '../src/assets/common.css'
Vue.use(VueAwesomeSwiper);
  • 第二种,局部插件引入

局部引入的话,就在你自己的vue文件中引入就可以了,引入方法如下:

说明:是否需要引入css文件需要看下载插件版本,如果是3以上,是不需要单独引入css文件的,如果是3以下,需要单独引入。

import 'swiper/dist/css/swiper.css'
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
 export default {
  components: {
   swiper,
   swiperSlide
  }

第三步:单独开发swiper的vue控件(这里以全局引入的方法为例) BannerSwiper.vue

<template>
  <!--滑动banner -->
 <div class="swiperbanner_container">
  <swiper :options="swiperOption" ref="mySwiper">
   <swiper-slide v-for="(item,index) in BannerList" :key="item.bannerid">
    <img :src="item.imgurl" alt="" class="banner_img">
   </swiper-slide>
  </swiper>
  <div class="swiper-pagination"></div>
 </div>
</template>
<script>
 import bannerurl1 from '../../assets/mall/banner.png'
 import bannerurl2 from '../../assets/smart/holiday.png'
 import bannerurl3 from '../../assets/smart/leave_home.png'
  export default {
    name: "SwiperBanner",
    data() {
      return {
       swiperOption:{
        direction:'horizontal',
        spaceBetween:10,
        observeParents: true,  //观察父组件,当父组件变化时,自己随着变化
        observer: true,   //观察自己,自己的参数变化时,更新
        centeredSlides:true,  //设置为true时,活动块居中显示,默认下居左显示
        loop:true,  //滑动过程中会在前后复制多个slider,效果看起来是循环的
        loopedSlides:3,  //设置滑动过程中所要用到的loop个数
        slidesPerView:'auto',  //同时显示的slide数量
        loopAdditionalSlides:100,
        autoPlay:{
         delay:3000,
         disableOnInteraction:false //鼠标移动上去时是否继续播放
        },
        pagination : '.swiper-pagination',
        paginationType : 'bullets',
        paginationElement:'span'
       }
      }
    },
   props:{
    BannerList:{
     type:Array,
     default:function(){
      return [
       {
        bannerid:0,
        imgurl:bannerurl1,
        bannerlink:''
       },{
        bannerid:1,
        imgurl:bannerurl2,
        bannerlink:''
       },{
        bannerid:2,
        imgurl:bannerurl3,
        bannerlink:''
       }
      ]
     }
    }
   },
   methods: {
   },
   computed: {
    swiper() {
     return this.$refs.mySwiper.swiper
    }
   },
   mounted() {
    console.log('this is current swiper instance object', this.swiper)
    this.swiper.slideTo(3, 1000, false);
   }
  }
</script>
<style scoped>
.swiperbanner_container{
 width:100%;
 height:160px;
 overflow: visible !important;
}
.swiper-pagination{
 bottom:2px !important;
}
 .banner_img{
  width:100%;
  height:116px;
 }
</style>

需要使用到的参数可以在官方文档中看到具体的含义,点击链接自行查看。

这里有两个参数需要特别注意:

spaceBetween:10

这个参数用于设置两个slide之间的间隙,可根据自己的项目动态修改

observeParents: true

observer: true

观察父组件,当父组件变化时,自己动态改变,刚开始开发的时候我没有设置这个变量,发现滑动的时候特别不流畅,感觉就是普通的滑动效果,无法划一下就跳到下一个完整的slide上去就是因为这个变量没有设置,所以非常重要。

第四步,在需要的文件中引用它,并给他传值,这里不多说,没什么特殊性,和普通的引用方法一样。

第五步,单独实现css样式。

经过了前四步以后,其实还不能完全实现效果图中的样子,我们还需要手动去修改插件中提供的样式。因为我是全局引入,所以修改的样式就放在刚开始说的common.css中。

common.css的内容如下:

/**重写swiper-slider的属性**/
.swiper-slide{
 width:85%;
 /*margin-left: 5px;*/
 /*margin-right: 5px;*/
}
.swiper-slide-active>img{
  height:136px !important;
 }
.swiper-slide-prev,.swiper-slide-next{
 margin-top:10px;
}

实现的思路:将中间处于激活状态的slide高度放大,其中!important不可省略,要不然会失效,将两边的slide分别向下移动一段距离。因为我的slide中只有一张图片,所以我直接修改了图片的高度,如果你的是div的话,你可以换成div的class名称。

刷新后,就是最开始的实现效果啦~

不过这里实现分页,我发现vue中设置分页变量不起作用,目前还未解决,等解决了再来更新,就这样。

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 数组的 uniq 方法
Jan 23 Javascript
DIY jquery plugin - tabs标签切换实现代码
Dec 11 Javascript
javascript中this做事件参数相关问题解答
Mar 17 Javascript
Javascript拓展String方法小结
Jul 08 Javascript
JavaScript中的原型和继承详解(图文)
Jul 18 Javascript
浅析AngularJs HTTP响应拦截器
Dec 28 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
May 28 Javascript
Ajax与服务器(JSON)通信实例代码
Nov 05 Javascript
JS数组返回去重后数据的方法解析
Jan 03 Javascript
jquery对table做排序操作的实例演示
Aug 10 jQuery
使用validate.js实现表单数据提交前的验证方法
Sep 04 Javascript
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 #jQuery
JS使用正则表达式提交页面验证的代码
Oct 16 #Javascript
JS使用正则表达式判断输入框失去焦点事件
Oct 16 #Javascript
微信小程序使用echarts获取数据并生成折线图
Oct 16 #Javascript
JS回调函数深入理解
Oct 16 #Javascript
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 #Javascript
js实现图片跟随鼠标移动效果
Oct 16 #Javascript
You might like
用PHP+java实现自动新闻滚动窗口
2006/10/09 PHP
php 批量替换程序的具体实现代码
2013/10/04 PHP
PHP+MySQL插入操作实例
2015/01/21 PHP
一个高效的JavaScript压缩工具下载集合
2007/03/06 Javascript
表单(FORM)的一些实用效果代码
2007/03/25 Javascript
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
js螺旋动画效果的具体实例
2013/11/15 Javascript
不要使用jQuery触发原生事件的方法
2014/03/03 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
2017/07/11 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
微信小程序框架wepy之动态控制类名
2018/09/14 Javascript
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
JS实现的tab页切换效果完整示例
2018/12/18 Javascript
Nodejs核心模块之net和http的使用详解
2019/04/02 NodeJs
Vue引入Stylus知识点总结
2020/01/16 Javascript
centos 安装python3.6环境并配置虚拟环境的详细教程
2018/02/22 Python
Python代码打开本地.mp4格式文件的方法
2019/01/03 Python
python使用turtle绘制国际象棋棋盘
2019/05/23 Python
使用NumPy读取MNIST数据的实现代码示例
2019/11/20 Python
python 实现线程之间的通信示例
2020/02/14 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
使用python爬取抖音app视频的实例代码
2020/12/01 Python
eDreams葡萄牙:全球最大的在线旅行社之一
2019/04/15 全球购物
北京银河万佳Java面试题
2012/03/21 面试题
北承题目(C++)
2012/05/16 面试题
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
新农村建设典型材料
2014/05/31 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
大学生先进个人主要事迹材料
2015/11/04 职场文书
Nginx HTTP跳转至HTTPS
2022/05/15 Servers