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 相关文章推荐
jquery select操作的日期联动实现代码
Dec 06 Javascript
HTML node相关的一些资料整理
Jan 01 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
Feb 01 Javascript
jquery如何通过name名称获取当前name的value值
Dec 20 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
Mar 18 Javascript
Thinkjs3新手入门之添加一个新的页面
Dec 06 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
Sep 07 Javascript
js实现动态增加文件域表单功能
Oct 22 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
Jan 21 Javascript
优雅地使用loading(推荐)
Apr 20 Javascript
JS document form表单元素操作完整示例
Jan 13 Javascript
ant design vue中表格指定格式渲染方式
Oct 28 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
MySQL授权问题总结
2007/05/06 PHP
队列在编程中的实际应用(php)
2010/09/04 PHP
PHP读取xml方法介绍
2013/01/12 PHP
深入解析fsockopen与pfsockopen的区别
2013/07/05 PHP
php数据库备份还原类分享
2014/03/20 PHP
PHP中round()函数对浮点数进行四舍五入的方法
2014/11/19 PHP
thinkphp配置连接数据库技巧
2014/12/02 PHP
javascript 函数速查表
2010/02/07 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
判断颜色是否合法的正则表达式(详解)
2017/05/03 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
详解ES6中的代理模式——Proxy
2018/01/08 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
node.js命令行教程图文详解
2019/05/27 Javascript
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
Python 可爱的大小写
2008/09/06 Python
Python通过DOM和SAX方式解析XML的应用实例分享
2015/11/16 Python
python得到单词模式的示例
2018/10/15 Python
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
在python中用url_for构造URL的方法
2019/07/25 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
Python如何实现的二分查找算法
2020/05/27 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
美国新蛋IT数码商城:Newegg.com
2016/07/21 全球购物
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
中西医专业毕业生职业规划书
2014/02/24 职场文书
校园歌咏比赛主持词
2014/03/18 职场文书
《回乡偶书》教学反思
2014/04/12 职场文书
帮一个朋友写的求职信
2014/08/09 职场文书
个人先进事迹材料
2014/12/29 职场文书
Python requests库参数提交的注意事项总结
2021/03/29 Python
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL