uniapp：实现tabs（scroll-view）点击左右滑动

快乐的小青蛙。

于 2024-10-10 13:11:08 发布

阅读量279

点赞数

文章标签： uni-app javascript 前端

本文链接：https://blog.csdn.net/weixin_46002223/article/details/142818963

版权

<!-- 内容区域 -->
		<view class="nav-box">
			<view class="nav-tab">
				<scroll-view
					class="navtab-scroll"
					enhanced
					:show-scrollbar="false"
					:scroll-left="scrollLeft"
					:scroll-with-animation="true"
					scroll-x>
					<view
						class="navTab-box"
						:style="{ width: totalWidth + 'px' }">
						<view
							class="tabTopItem"
							v-for="(item, index) in 10"
							:key="item.id"
							@click="checkedItem(index)">
							<view
								:class="[
									index == tabChecked
										? 'checkedStyle checkedImg'
										: 'navTab-item',
									'navTab-item',
								]">
								<view class="tab-title">清洁服务</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>


	data() {
		return {
			searchValue: "",
			tabChecked: 0,
			itemWidth: 0, //每个item的宽度
			totalWidth: 10000, //设置一个默认总宽度
			scrollLeft: 0, //滑动距离
			tabTopList: [],
		};
	},
	onLoad() {
		/*
					计算总宽度和每个item的宽度
					item宽度 = 自身宽度 + 8px右边距
					总宽度 = item个数 * 每个item的宽度
				*/
		this.$nextTick(() => {
			let dom = uni.createSelectorQuery().select(".tabTopItem");
			dom.boundingClientRect((data) => {
				let num = this.tabTopList.length;
				this.itemWidth = data.width + 8;
				this.totalWidth = num * this.itemWidth;
			}).exec();
		});
	},
	methods: {
		checkedItem(index) {
			console.log(index);
			this.tabChecked = index;
			this.scrollLeft = this.itemWidth * (index - 1);
		},
	},


.nav-box {
	margin-top: 20rpx;
	background: #ffffff;
	.nav-tab {
		width: 100vw;
		height: 133rpx;
		box-sizing: border-box;
		background-color: pink;
		padding: 0 55rpx;
		padding-top: 36rpx;
		.navTab-box {
			display: flex;
			.navTab-item {
				height: 133rpx;
				width: 165rpx;
				line-height: 45rpx;
				text-align: center;
				font-weight: 400;
				font-size: 26rpx;
				color: #162641;
				font-style: normal;
				position: relative;
			}
			.checkedStyle {
				font-weight: 600;
				font-size: 32rpx;
				color: #162641;
			}
			.checkedImg ::after {
				position: absolute;
				content: "";
				width: 52rpx;
				height: 16rpx;
				left: 50%;
				top: 60rpx;
				z-index: 999;
				transform: translateX(-50%);
				background-image: url("https://img.yunxi360.com/xiaochengxu/%E8%B7%AF%E5%BE%84%208%402x.png");
				background-size: 100% 100%;
			}
		}
	}
}