uni-app 使用swiper做左右滑动数据表格

先上效果图，只是模拟数据，可以将v-for里面的数据源替换成后台请求的数据

       

1.首先在data中定义以下内容

dateList 列表

dateStatus 选中下标

dateCurrent 滑动下标

• <script>
  	export default {
  		data() {
  			return {
  				dateList: [{
  					title: '今日'
  				}, {
  					title: '昨日'
  				}, {
  					title: '本月'
  				}, {
  					title: '上月'
  				}, {
  					title: '今年'
  				}],
  				dateStatus: 0, //标记日、月、年选中
  				dateCurrent: 0, //标记日、月、年切换
  			}
  		}
  	}
  </script>

 2.在template标签中循环dateList 列表，有多少项就循环多少次swiper-item

<template>
	<view class="container">
		<view class="foot">
			<scroll-view scroll-x="true" class="date_state_tab" scroll-with-animation>
				<block v-for="(item,index) in dateList" :key="index">
					<view @click="dateTabs(index)">
						<text :class="dateStatus == index ? 'dateStatus' : '' ">{{item.title}}</text>
					</view>
				</block>
			</scroll-view>
			<swiper style="height: 100%;" :duration="500" @change="dateChange" :current="dateCurrent">
				<swiper-item v-for="(ite,inde) in dateList" :key="inde">
					<view class="table">
						<view class="th">
							<text>产品名称-{{ite.title}}</text>
							<text>访客量</text>
							<text>浏览量</text>
							<text>收藏人数</text>
						</view>
						<block v-for="i of 8" :key="i">
							<view class="td">
								<view><text>{{i}}-测试产品勿拍-艾菲 现代极简布艺床#C31 德国进口抗污布 高回弹海绵 1.8*2.0米床 实木框架 10年稳固</text></view>
								<view>8888</view>
								<view>8888</view>
								<view>8888</view>
							</view>
						</block>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

3.定义点击事件dateTabs方法传入当前下标，切换swiper

 4.定义左右滑动触发事件dateChange切换swiper，dateCurrent为当前所在滑块的 index、duration 为滑动动画时长

  

 点击、滑动切换事件

methods: {
   dateTabs(index) {
		this.dateStatus = index;
		this.dateCurrent = index;
	},      
	dateChange(e) {
		let index = e.detail.current;
		this.dateStatus = index;
		this.dateCurrent = index;
	},
}

 最后是css样式、用的是scss写法

<style lang="scss">
	view,
	scroll-view,
	swiper,
	swiper-item {
		box-sizing: border-box;
	}

	page {
		background-color: #F8F8F8;
	}

	.container {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 0;
		margin: 0;
	}

	.foot {
		margin: 15rpx 0rpx;
		background-color: #fff;
		border-radius: 20rpx;
		width: 100%;
		height: 920rpx;

		.date_state_tab {
			width: 100%;
			height: 82rpx;
			line-height: 82rpx;
			white-space: nowrap;
			overflow: hidden;
			display: inline-block;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;

			view {
				width: calc(100% / 5);
				height: 82rpx;
				display: inline-block;
				white-space: nowrap;
				text-align: center;
				position: relative;

				text {
					width: 51rpx;
				}
			}

			.dateStatus {
				font-size: 28rpx;
				font-weight: 500;
			}

			.dateStatus:after {
				content: "";
				display: block;
				height: 6rpx;
				width: 51rpx;
				background: #265DDD;
				position: absolute;
				left: calc(50% - 25.5rpx); // 51/2=25.5 是宽度的一半
				bottom: 0;
				border-radius: 12rpx;
			}
		}

		.table {
			background: #FDFFFF;

			.th {
				border-radius: 20rpx 20rpx 0rpx 0rpx;
				height: 80rpx;
				background: #F4F6FF;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				display: flex;
				align-items: center;
				padding: 0 30rpx;

				text {
					width: calc(60% / 3);
					text-align: center;
				}

				& text:first-child {
					width: 40%;
					text-align: left;
					height: 100%;
					line-height: 80rpx;
					box-shadow: 15rpx 0rpx 0rpx rgba(170, 170, 170, 0.1);
				}
			}

			.td {
				height: 90rpx;
				font-size: 24rpx;
				font-family: DIN;
				font-weight: 500;
				color: #333333;
				display: flex;
				align-items: center;
				margin: 0 30rpx;
				border-bottom: 1px solid #eee;
				border-width: thin;

				view {
					width: calc(60% / 3);
					text-align: center;
				}

				view:first-child {
					width: 40%;
					height: 100%;
					text-align: left;
					font-size: 20rpx;
					padding-right: 22rpx;
					box-shadow: 15rpx 0rpx 0rpx rgba(170, 170, 170, 0.1);
					display: flex;
					align-items: center;

					text {
						word-break: break-all;
						text-overflow: ellipsis;
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						height: 52rpx;
					}
				}
			}
		}
	}
</style>