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

青旅半醒 2022-11-25 04:09 333阅读 0赞

<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][https_developers.weixin.qq.com_miniprogram_dev_component_swiper.html]

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

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

[https_developers.weixin.qq.com_miniprogram_dev_component_swiper.html]: https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html