vue 结合swiper插件实现广告公告上下滚动的效果

最新推荐文章于 2024-08-09 08:26:24 发布

weixin_30736301

最新推荐文章于 2024-08-09 08:26:24 发布

阅读量827

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/chwlhmt/p/9978181.html

版权

本文介绍如何在项目中结合vue和swiper插件，实现广告公告的上下滚动效果。首先通过npm安装vue-awesome-swiper，然后在main.js中引入并配置，从而达到理想中的滚动展示。

摘要由CSDN通过智能技术生成

最近做到的项目里面需要广告公告上下滚动，网上也找了很多例子，效果总是不理想，所以就想着利用轮播图的竖直方向的滚动来实现这个效果

一、在项目里面安装swiper插件

通过npm安装: npm install vue-awesome-swiper --save

二、在main.js里面引入

import 'swiper/dist/css/swiper.css'

import VueAwesomeSwiper from 'vue-awesome-swiper'

Vue.use(VueAwesomeSwiper)

<template>
    <!-- <div class="page"> -->
    <div class="main">
        <div class="main_con">
                <div class="nwwest-roll">
                    <swiper class="roll-ul" :options="swiperOption" ref="mySwiper" v-if="topMovieLists.length>0" >
　　　　　　　　　　　　　　　//父容器里面的v-if="topMovieList.length>0&