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 相关文章推荐
为Extjs加加速(javascript加速)
Aug 19 Javascript
JavaScript之自定义类型
May 04 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
Dec 11 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
jquery实现用户信息修改验证输入方法汇总
Jul 18 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
CSS中position属性之fixed实现div居中
Dec 14 Javascript
探讨JavaScript语句的执行过程
Jan 28 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 Javascript
一些手写JavaScript常用的函数汇总
Apr 16 Javascript
node解析修改nginx配置文件操作实例分析
Nov 06 Javascript
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
如何解决phpmyadmin导入数据库文件最大限制2048KB
2015/10/09 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
2007/02/09 Javascript
js日期、星座的级联显示代码
2014/01/23 Javascript
JS+DIV实现鼠标划过切换层效果的方法
2015/05/25 Javascript
Jquery实现遮罩层的方法
2015/06/08 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
jQuery解析返回的xml和json方法详解
2017/01/05 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
2018/09/20 Javascript
详解使用WebPack搭建React开发环境
2019/08/06 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
2020/08/04 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
python sys.argv[]用法实例详解
2018/05/25 Python
Python OS模块实例详解
2019/04/15 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
Python改变对象的字符串显示的方法
2020/08/01 Python
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
HTML5新特性之用SVG绘制微信logo
2016/02/03 HTML / CSS
Herschel美国官网:背包、手提袋及配件
2020/03/10 全球购物
Java程序员综合测试题
2014/04/25 面试题
医院后勤自我鉴定
2013/10/13 职场文书
环境工程毕业生自荐信
2013/11/17 职场文书
四年的个人工作自我评价
2013/12/10 职场文书
学习十八大报告感言
2014/02/04 职场文书
采购助理岗位职责
2014/02/16 职场文书
太太口服液广告词
2014/03/20 职场文书
员工工作及收入证明
2014/10/28 职场文书
2014年转正工作总结
2014/11/08 职场文书
神秘岛读书笔记
2015/07/01 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书