swiper 快速左右滑动出现自动不停地抖动的BUG

<template>
	<view class="content">
		<view class="nav">
			<view :class="indicator== 0 ? 'skyblue' : '' " @tap="onnav(0)">安装信息</view>
			<view :class="indicator== 1 ? 'skyblue' : '' " @tap="onnav(1)">OBD数据</view>
			<view  :class="indicator== 1 ? 'span spanright  ' : 'span '"></view>
		</view>
		<swiper ref="swiper" class="swiper" :current="indicator" 
  @change="onchangedetail">
			<swiper-item >
				<view class="information">
				    这是第一页
                    
                </view>	
			</swiper-item>
			<swiper-item>
				<view class="nodata" v-if="!detailedlist">
					<strong>这是第二页</strong>
				</view>
			</swiper-item>
		</swiper>
		
			
	</view>
	
</template>

<script>
	export default {
		
		data (){
			return {
				indicator:0,
				
			}
		},
        methods:{
            onnav(index){
				this.indicator= index;
			},
            onchangedetail(e){
                if(e.detail.source == 'touch') {
                    this.indicator= e.detail.current;
                }
				
			},
        }

	}
	
</script>

<style lang="scss">
	
	
</style>

官方文档 : https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

注意: 如果在 bindchange 的事件回调函数中使用 setData 改变 current 值,则有可能导致 setData 被不停地调用,因而通常情况下请在改变 current 值前检测 source 字段来判断是否是由于用户触摸引起。

所以我们只需要判断一下  e.detail.source == 'touch'  如果为空的话 ,说明不使用户手动点的买这个样我们就什么都不操作。

 

 

要实现 Swiper自动滚动,你可以使用 Swiper 的 autoplay 参数。autoplay 参数接受一个对象作为值,你可以在该对象中设置自动滚动的相关选项。 以下是一个示例代码片段,展示了如何使用 Swiper 实现自动滚动: ```html <!DOCTYPE html> <html> <head> <!-- 引入 Swiper 样式文件 --> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"> </head> <body> <!-- 创建一个容器用于放置 Swiper --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> </div> <!-- 引入 Swiper JavaScript 文件 --> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> <script> // 初始化 Swiper var swiper = new Swiper('.swiper-container', { autoplay: { delay: 3000, // 自动滚动的延迟时间,单位为毫秒 disableOnInteraction: false // 用户操作后是否禁止自动滚动 } }); </script> </body> </html> ``` 在上述代码中,我们引入了 Swiper 的样式文件和 JavaScript 文件,并在 HTML 中创建了一个容器用于放置 Swiper。然后,通过 JavaScript 初始化了 Swiper,并在 autoplay 参数中设置了自动滚动的延迟时间和用户操作后是否禁止自动滚动。 你可以根据实际需求调整延迟时间和其他参数,以满足你的需求。请确保在使用之前引入正确的 Swiper 样式和 JavaScript 文件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值