在uniapp中使用swiper处理滑动边界问题

最新推荐文章于 2025-07-26 09:32:19 发布

原创最新推荐文章于 2025-07-26 09:32:19 发布 · 3.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了如何解决uniapp项目中在低端安卓和苹果设备上tab页切换卡顿的问题，以及提供了一个使用scroll-list和swiper组件避免页面缝隙的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个在浏览器上不卡，但是中端以下的安卓机和12pro以下的苹果机上，卡的要死，慎用
在用uniapp做项目的时候发现tab页切换到边界的时候会漏出半个屏幕的空隙，而正常的tab切换则是滑到边界后切换到下一个选项卡，后来百度好久，终于找到了这个解决的办法


<template>
	<view >
			<scoll :list="scoll" @getIndex="getIndex1" :activeIndex.sync="activeIndex" class="padding"></scoll>
			<swiper :style="{height:swiperheight+'px'}" :current="activeIndex" @change="changeIndex" :disable-touch="touch">
				<swiper-item v-for="(item,index) in scoll.length" :key="index" @touchmove="touchmove" @touchstart="touchstart">
					<view class="swiper-item padding">
						<scroll-view scroll-y="true" style="height: 100%; " scroll-anchoring>
						<skillList :list="skillList" />
						</scroll-view>
					</view>
				</swiper-item>
			</swiper>
		</view>
</template>

<script>
	import scoll from '@/components/scoll/scoll.vue';
	import skillList from "@/components/skill/skill-list.vue"
	export default {
		components: {
			skillList,
			scoll
		},
		props: {
			list: Array
		},
		data() {
			return {
				touch:false, //是否允许滑动
				touchStart:0,//第一次滑动的位置
				activeIndex: 0,
				scoll:["全部","互联网","金融","帮送","视频制作","设计","互联网","互联网","互联网"],
				swiperheight: 0,
			}
		},
		methods: {
			touchstart(res){
				this.touchStart=res.touches[0].clientX
			},
		touchmove(res){
			if(this.activeIndex==0){
				res.touches[0].clientX>this.touchStart?this.touch=true:this.touch=false
				//如果滑动到了第一项，就禁止再向左滑动
			}else if(this.activeIndex==this.scoll.length-1){
				res.touches[0].clientX<this.touchStart?this.touch=true:this.touch=false
				//如果滑动到了最后一项，就禁止向右滑动
			}else{
			//以上条件都不符合，就随便滑动
				this.touch=false
			}
		},
	}
</script>

微信小程序不好用，ios和h5可以，微信小程序可以直接用uview