uview tabs标签与轮播swiper的使用

最新推荐文章于 2024-08-30 15:08:13 发布

陈醋拌饭

最新推荐文章于 2024-08-30 15:08:13 发布

阅读量5.1k

点赞数 2

分类专栏： uni-app iview组件微信小程序文章标签： uni-app

本文链接：https://blog.csdn.net/weixin_44167504/article/details/115508073

版权

uni-app 同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

微信小程序

12 篇文章 0 订阅

订阅专栏

iview组件

9 篇文章 0 订阅

订阅专栏

本文介绍了在使用uviewtabs和轮播swiper时遇到的快速滑动导致swiper卡死的问题。通过将swiper的事件监听器@change替换为@animationfinish，可以有效避免这个问题。示例代码展示了如何在tabs和swiper组件中应用这一修改，确保流畅的滑动体验。

摘要由CSDN通过智能技术生成

uview tabs标签与轮播swiper的使用

如果可左右滑动切换时，由于速度过快可能出现swiper卡死的问题，可将swiper 的@change改为@animationfinish

			<view class="u-tabs-box">
				<!-- 横向滚轴tabs -->
				<scroll-view scroll-x scroll-with-animation class="scroll-tab">
					<!--cTab实际上就是u-tabs,我自己改了样式使用-->
					<cTab :list="items" :is-scroll="true" :current="current" @change="change"></cTab>
				</scroll-view>
			</view>
			<!-- swiper -->
			<swiper class="swiper-box" :current="swiperCurrent" @change="onchange">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y class="scroll-tab" style="height: 100%;width: 100%;" @scrolltolower="onReachBottom1">
						<view class="page-box">
							<uniList class="uniList" v-if='allData.length>0'>
								<uniListItem v-for="(item,index) in allData" :key="index" :title="item.title" :note="item.describe" :thumb="item.imgsrc"
								 thumb-size="lg" :rightText="item.Date"></uniListItem>
							</uniList>
							<view v-else style="height:100vw; display: flex;justify-content: center; align-items: center;">
								<u-empty text="暂无数据" mode="data"></u-empty>
							</view>
							<view v-if='showBT==true' style="display: flex;justify-content: center;">
								<span>没有更多了</span>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onReachBottom1">
						<view class="page-box">
							......
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>

/* swiper上一级view的class */
	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}
	.scroll-tab {
		width: 100vw;
		height: calc(100vh-86px);
	}
	
	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}

	/* 卡片的高度 */
	.page-box {
		flex: 1;
	}

// tabs改变
			change(index) {
				this.swiperCurrent = index
				this.current = index;
			},
			// swiper改变
			onchange(e) {
				this.swiperCurrent = e.detail.current
				this.current = e.detail.current
			},