vue项目使用swiper完成垂直滚动_新闻列表功能

​

 前言

在vue项目中使用swiper+vue-awesome-swiper实现一个上下滚动的跑马灯/新闻列表/图片列表，有数据时展示列表，没数据时自定义说明。

效果如下：一个页面中展示4个列表（或图片）,列表向上滚动，鼠标移入停止滚动且显示title，鼠标移出滚动再次开启，有分页

当没有数据时，页面会显示“当前一切正常

组件和注意事项

vue+swiper@4.5.1+vue-awesome-swiper@2.6.7

在vue项目中，滚动列表用的是vue-awesome-swiper，因为awesome-swiper依赖于swiper，所以二者都需要下载

vue-awesome-swiper@2.6.7的配置项用法和内容，可查看swiper3官网API，地址如下：

https://3.swiper.com.cn/api/index.html

注意版本，不同swiper版本的配置写法不同，经查阅4或5版本是比较稳定。其余版本可能会造成缺陷，所以仅供参考！

注意API，不同版本vue-awesome-swiper对应的swiper不一样，导致同一个事件的事件名并不同，比如鼠标移入hover停止滚动事件，常见解答用swiper.autoplay.stop()但在该项目没有用，这就要考虑一下版本问题。

想知道那个版本，可以，打印swiper的dom，debugger查看this.$refs.mySwiper.swiper带的方法，在2.6.7版本中发现了

stopAutoplay，网上搜索stopAutoplay就找到了swiper3的文档

代码分解

下载

npm install vue-awesome-swiper@2.6.7 -save
npm install swiper@4.5.1 -save

引入

//main.js
import 'swiper/dist/css/swiper.css'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

　　

awesomeSwiper组件封装

<template>
  <div class="slide-box" @mouseenter="mouseEnterHandler" 
      @mouseleave="mouseLeaveHandler"
      >
    <template v-if="spShow">
      <swiper :options="swiperOption" ref="mySwiper">
        <swiper-slide v-for="(slide, index) in swiperData" :key="slide.id" class="swiperSlide">
          <div class="swiperContent" :title="slide.content">{{slide.content}}</div>
        </swiper-slide>       
      </swiper>

   <div :class="pClass+'swiperPagination'" class="swiperPagination"></div>
   </template>
   <template v-else>
     <div class="noErrorStyle">当前运行正常！</div>
   </template>
</div>

</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  props:{
    swiperData:{
      type:Array,
      default:[]
    },
    pClass:{
      type:String,
      default:''
    }
  },
  data(){
    return {
      // 配置项含义，参考文档swiper3
     swiperOption: {                     
        notNextTick: true,
        direction:'vertical',
        setWrapperSize: true,
        freeMode:true,//true则是自由模式，不会自动贴合滑动位置
        autoplay:4000,//切换时间间隔
        //loop:true,//循环
      　 observer:true,//修改swiper自己或子元素时，自动初始化swiper 
　　     observeParents:true,//修改swiper的父元素时，自动初始化swiper  
        spaceBetween:10,//slide之间的距离，px
        slidesPerView:4 ,//slide可见数量
        mousewheelControl : true,//鼠标滚轮控制
        grabCursor:true,//鼠标变为抓手
        preventClicksPropagation:false,
        //pClass是父组件传入的，独一无二的class能保证swiper组件是独立的。即保证一个页面多处调用该swiper组件
        //时，swiper分页不会相互影响。在没有pClss时，一个页面多处调用swiper，这些swiper分页会互相影响导致
       //混乱
        pagination:'.'+this.pClass+'swiperPagination',
        paginationClickable:true ,
        // 自定义分页样式
        paginationBulletRender:function (swiper, index, className) {    
               return '<span class=" + className + ">' + (index + 1) + '</span>';
        },
      
      },
      spShow:false//默认为ture将不会显示自定义内容
    }
  },
  components: {
    swiper,
    swiperSlide
  },
  watch:{
    swiperData:{
      handler(){
        if(this.$refs.mySwiper){
          this.$refs.mySwiper.swiper.update(true)//更新
        }
      }
    },
    'swiperData.length':{
      handler(newValue,oldValue){
        // 有数据显示swiper，没数据显示自定义内容
        if(newValue>0){  
          this.spShow=true 
        }else{
          this.spShow=false
        }
        if(this.$refs.mySwiper){
          this.$refs.mySwiper.swiper.update(true)
        }
        
         
      }
    }
    
  },
 methods:{
   mouseEnterHandler(){
     if(this.$refs.mySwiper){//鼠标移入停止滚动
      this.$refs.mySwiper.swiper.stopAutoplay()
     }    
      
   },
   mouseLeaveHandler(){
      if(this.$refs.mySwiper){//鼠标移出开始滚动
      this.$refs.mySwiper.swiper.startAutoplay()
     }
     
     
   },
   
 },
}

</script>

<style lang="scss" scoped>
.slide-box{
  width: 100%;
  height: 100%;
  color:#fff;
  
}
.swiper-container{
  height: 96%;
}
.swiperSlide{
  height:33px;
  width: 96%;
  background: rgba(35, 37, 165,0.2);
  border-left:3px solid rgb(199, 218, 35);
  border-right:3px solid #efbc4a;
  font-size: 13px;
  color: rgb(245, 245, 245);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 10px;
  box-sizing: border-box;
  border-radius: 6px;
  box-shadow: #020c3b 1px 2px 2px;
}
.swiperPagination{
  height: 3%;
  text-align: center;
}
.noErrorStyle{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

</style>

　　

vue中使用awesomeSwiper组件

import AwesomeSwiper from '@/components/scroll/awesome-swiper' 
<AwesomeSwiper :swiperData="diData" :pClass="'di'"></AwesomeSwiper>

　　

完成

​