swiper实现竖直方向滚动字幕
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了swiper实现竖直方向滚动字幕相关的知识,希望对你有一定的参考价值。
参考技术A 垂直方向的滚动在开发过程中遇到的问题主要有2个,一个是移动端无法滚动,一个是每次数据循环完成之后sweiper都从第一条数据开始导致字幕快速滚动之后才正常滚动,原因是没有设置循环滚动解决:移动端添加属性 observer: true, observeParents: true, 对数据进行监听
添加 loop : true属性解决每次都从头开始滚动,之前添加过这个属性没好使后来又可以了
注意:swiper-wrapper不能添加overflow:scroll样式,不然会导致swiper-no-swiping无效
<template>
<div class="live-lottery-notice" v-show="logList.length > 0">
<div class="swiper-container swiper-no-swiping">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in logList" :key="index">XXX</div>
</div>
</div>
</div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import Swiper from 'swiper';
export default
props: ['logList'],
data()
return
mySwiper: null
,
mounted()
this.initSwiper()
,
methods:
initSwiper()
this.$nextTick(()=>
setTimeout(()=>
this.mySwiper = new Swiper('.swiper-container',
initialSlide :0,
slidesPerView :'auto',
autoplay: // 自动滑动
stopOnLastSlide: false,
delay: 5000, //5秒切换一次
disableOnInteraction: false
,
direction:'vertical',
grabCursor:true,
autoplayDisableOnInteraction:false,
// mousewheelControl:true,
autoHeight:true,
observer: true,
observeParents: true,
speed:1000,
loop : true
)
,500)
)
</script>
<style lang="scss" scoped>
.live-lottery-notice
width: 100%;
height: auto;
</style>
以上是关于swiper实现竖直方向滚动字幕的主要内容,如果未能解决你的问题,请参考以下文章