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 相关文章推荐
用js统计用户下载网页所需时间的脚本
Oct 15 Javascript
json的前台操作和后台操作实现代码
Jan 20 Javascript
javascript工具库代码
Mar 29 Javascript
js中判断对象是否为空的三种实现方法
Dec 23 Javascript
JavaScript实现找出字符串中第一个不重复的字符
Sep 03 Javascript
修改或扩展jQuery原生方法的代码实例
Jan 13 Javascript
微信小程序 toast 详解及实例代码
Nov 09 Javascript
浅谈VUE监听窗口变化事件的问题
Feb 24 Javascript
微信小程序实现刷脸登录
May 25 Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 Javascript
layui实现根据table数据判断按钮显示情况的方法
Sep 26 Javascript
vue父子模板传值问题解决方法案例分析
Feb 26 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
PHP文件上传主要代码讲解
2013/09/30 PHP
php绘制一个矩形的方法
2015/01/24 PHP
支持png透明图片的php生成缩略图类分享
2015/02/08 PHP
PHP常用排序算法实例小结【基本排序,冒泡排序,快速排序,插入排序】
2017/02/07 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
2011/07/08 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
Jquery中扩展方法extend使用技巧
2014/08/24 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
基于js实现checkbox批量选中操作
2016/11/22 Javascript
axios基本入门用法教程
2017/03/25 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
详解用Node.js写一个简单的命令行工具
2018/03/01 Javascript
JQuery常用选择器功能与用法实例分析
2019/12/23 jQuery
jquery实现轮播图特效
2020/04/12 jQuery
微信小程序文章列表功能完整实例
2020/06/03 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
OpenCV+Python识别车牌和字符分割的实现
2019/01/31 Python
python类中super() 的使用解析
2019/12/19 Python
scrapy-splash简单使用详解
2021/02/21 Python
享誉全球的多元化时尚精品购物平台:Farfetch发发奇(支持中文)
2017/08/08 全球购物
如何用SQL语句进行模糊查找
2015/09/25 面试题
创业计划实施的7大步骤
2014/02/05 职场文书
初中家长寄语
2014/04/02 职场文书
安全口号大全
2014/06/21 职场文书
2014年秋季开学典礼主持词
2014/08/02 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
2014年小学教师工作总结
2014/11/10 职场文书
乌镇导游词
2015/02/02 职场文书
离婚案件原告代理词
2015/05/23 职场文书
聊聊redis-dump工具安装问题
2022/01/18 Redis