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

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

一、在项目里面安装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"是必须写的，否则将不起作用<swiper-slide v-for="(item,index) in topMovieLists" :key="index" >//这里放着每个列表里面的内容</swiper-slide></swiper></div></div></div></div><!-- </div> -->
</template><script>let vm = null;
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Vue from 'vue';
export default {name: 'Home',components: {Empty,ProjectList,swiper,swiperSlide},data() {return {swiperOption: {notNextTick: true,direction: "vertical",   //控制滚动的方向paginationClickable: true,autoplay: {delay:2000  //这里需要注意，如果想每2秒去自动切换，直接autoplay:2000是失效的，},loop: true,on:{click:function(e){　　　　　　　　　　　　　　//注意点：想要给滚动的列表的每一项加上点击事件，需要在这个回调里面进行，否则不起作用let realIndex = this.realIndex;//  console.log(e,'轮播')vm.jumpDesc(realIndex)  //这里调用的是定义在methods里面的方法}}},topMovieLists: [], //影视头条列表}},mounted() {        },created() {　　　　vm = this;},methods: {}
}
</script>

转载于:https://www.cnblogs.com/chwlhmt/p/9978181.html

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

vue使用swiper插件
昨天搞这个插件,搞得我很生气! 我只是要个最简单的移动端轮播图,整的我心态本类能够自动播放,循环就行.. 但是找了一圈,一直报错还有就是,我获取图片是通过接口的,所以用到了v-for循环就会出现 ...
实战：vue项目中导入swiper插件
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装安装swiper3的最新版本3.4.2: ...
vue导入swiper_vue项目中导入swiper插件的方法
这篇文章主要为大家详细介绍了vue项目中导入swiper插件的方法,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 版本选择 swiper是个常用 ...
Vue中引入swiper插件报错：To install it, you can run: npm install --save swiper/css/swiper.css
Vue中引入swiper插件报错:To install it, you can run: npm install --save swiper/css/swiper.css 今天在写项目的时候用到了Sw ...
【Vue项目笔记心得】Swiper插件用于轮播图
1.下载一个版本的swiper,这里以5.4.5为例, 在项目开发过程中需要安装swiper插件 npm install swiper@5 官网地址:Swiper中文网-轮播图幻灯片js插件,H5页面 ...
解决vue中使用swiper插件——李帅醒博客
解决vue中使用swiper插件,在引入swiper插件后,发现无法正常运行这次我们模拟从后台取下数据,然后数据绑定在swiper标签中. <template><div class ...
【独立版】智慧城市同城V4_2.1.1全开源全插件+VUE前端，修复平台装修公告组件风格二和风格三无法自动滚动的问题
源码介绍 [独立版]智慧城市同城V4_2.1.1全开源全插件+VUE前端,修复平台装修公告组件风格二和风格三无法自动滚动的问题! 智慧城市同城是一套专注于多城市生活服务同城技术解决方案,全面覆盖同堿信 ...
vue弹窗调用另一个弹窗_电脑桌面“脏乱差”，插件弹窗广告一个不少，学会say no很重要...
Hello大家好,我是兼容机之家的小牛! 很多人买了新电脑,一次性就把很多可能用到的,用不到的软件都装在电脑上,这样不出一会电脑开机就变慢了,C盘容量减少了,反而有可能多了很多垃圾的弹窗. 了解一点电 ...
JS9day(BOM对象模型,setTimeout定时器，JS单线程执行机制，location对象，swiper插件，localStorage本地存储，购物车案例升级版，学习信息案例（本地存储）)
文章目录 BOM简介定时器-延时函数 5秒关闭广告案例递归模拟setInterval函数两种定时器对比 JS 执行机制 location对象 navigator对象 histroy对象(了解) ...

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

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

最新文章

热门文章