解决：移动端添加属性 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滚动时 将swiper容器position设成absoluate或者fixed，然扒仿后在swiper滚春皮纤动到最后一页时 position设置为默认握雹值1、首先需要打开HBuilderX开发工具，创建一个Web项目，并将swiper插件对应的CSS和JavaScript文件拷贝到项目中。
2、然后新建一个静态页面，然后扒老将swiper插件的文游此源件神态引入到页面中。
3、接着在<body></body>标签中，插入多个div标签并设置class属性。
4、利用类选择器和伪类选择器nth-child，设置几个div标签的样式。
5、调用jquery初始化函数，对swiper插件进行初始化，设置autoplay属性。
6、最后保存代码并运行项目，打开浏览器查看界面效果。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）