vue-awesome-swiper实现文字滚动

最新推荐文章于 2024-11-04 14:54:03 发布

Razas

最新推荐文章于 2024-11-04 14:54:03 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： oitit

本文链接：https://blog.youkuaiyun.com/qq_25354709/article/details/103323820

oitit 专栏收录该内容

11 篇文章

订阅专栏

本文档介绍了如何在Vue项目中通过vue-awesome-swiper组件来实现文字滚动的效果，包括如何全局引入组件、具体使用方法及样式设置等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.1 引入

全局引入，其他地方不需再引入。

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)

1.2 使用

<div class="list">
    <swiper :options="swiperOptions" class="swiper-no-swiping">
        <swiper-slide v-for="(item, index) in awardAllList" :key="item.id" class="item">
            恭喜 {{item.mobile}} &nbsp;抽中&nbsp; {{item.content}}
        </swiper-slide>
    </swiper>
</div>



data () {
      return {    
        swiperOptions: {
          autoplay: {
            delay: 1000
          },
          direction: 'vertical',
          slidesPerView: 5,
          loop: true,
          observer: true,
          observeParents: true,
          speed: 1000,
          mousewheel: false,
          noSwiping: true
        }
      }
    },


或者在计算属性里面设置swiperOptions

computed: {
   swiperOptions () {
     return {
       autoplay: {
         delay: 1000
       },
       direction: 'vertical',
       slidesPerView: 5,
       loop: true,
       observer: true,
       observeParents: true,
       speed: 1000,
       mousewheel: false,
       noSwiping: true
     }
   }
 },

1.3 样式

.list {
     width:  rem(588);
     height: rem(260);
     margin: rem(240) auto 0;
     overflow: hidden;
     .swiper-container {
         height: 100% !important;
         .item{
             height: rem(40) !important;
             line-height: rem(40);
             color: #f5f5f5;
             font-size: rem(28);
             margin-bottom: rem(12);
             letter-spacing: 1px;
         }
     }
 }