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

作者:心若向阳无谓悲伤 时间:2024-05-10 14:14:10 

本文实例讲述了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程序设计有所帮助。

来源:https://blog.csdn.net/qq_31490071/article/details/87864706

标签:Vue,横向滑动
0
投稿

猜你喜欢

  • PHP开发中常用的三个表单验证函数使用小结

    2023-11-21 19:15:50
  • Sql Server 视图数据的增删改查教程

    2024-01-22 07:51:05
  • 流动的线条 —— 中国汉字书法之美

    2009-10-30 18:15:00
  • Python实现二维曲线拟合的方法

    2021-08-26 12:38:01
  • 网站重构 CSS样式表的优化技巧

    2009-05-12 11:51:00
  • MySQL五个查询优化方法

    2009-08-29 15:05:00
  • python代码打印100-999之间的回文数示例

    2022-10-14 02:53:39
  • mysql update case 更新字段值不固定的操作

    2024-01-15 06:25:41
  • Python利用Selenium实现弹出框的处理

    2021-11-12 23:21:50
  • Python常见错误:IndexError: list index out of range解决

    2021-02-17 21:53:10
  • 新手入门学习python Numpy基础操作

    2023-10-08 07:46:27
  • PHP5在Apache下的两种模式的安装

    2023-11-24 05:18:08
  • asp源码如何显示数据库字段的结构?

    2010-06-08 09:35:00
  • Python使用turtle模块绘制爱心图案

    2022-07-31 06:46:26
  • 如何使用Python实现自动化水军评论

    2022-08-25 21:15:48
  • Python3.5 Pandas模块缺失值处理和层次索引实例详解

    2021-05-20 00:35:50
  • Python实现希尔排序算法的原理与用法实例分析

    2021-10-19 17:44:08
  • 使用numba对Python运算加速的方法

    2022-05-12 20:30:57
  • 详细分析Python垃圾回收机制

    2021-04-18 02:43:43
  • python 离散点图画法的实现

    2021-04-14 17:00:31
  • asp之家 网络编程 m.aspxhome.com