uniapp顶部选项卡左右切换栏目(微信小程序)

此次阐述的内容是使用uniapp小程序端实现顶部选项卡的功能。

如下三步即将实现：

一：view层

<scroll-view class="tab" scroll-x="true" :scroll-left="scrollLeft">
	<block v-for="(item,index) in tabData" :key="index">
	<!-- 标签动态样式 -->
	<view class="tab-item" :class=" [currentTab==index ? 'active' : 'none'] " :data-current="index"@click="clickTab">
		{{item.title}}
	</view>
</block>
</scroll-view>
<!-- 选项卡页面 -->
<swiper class="swiper" :current="currentTab" duration="300" @change="swiperTab" :style=" {height: windowHeight +'px'} ">
	<swiper-item v-for="(item,index) in tabData" :key="index">
	<scroll-view scroll-y="true" :style=" {height: windowHeight +'px'} " @scrolltolower="getMore">
	<view class="page-item">
		<view v-for="(item,index2) in contentData" :key="index2">
		<!-- v-if="currentTab==item.type" 只渲染当前页面对应的数据，不然每个页面的内容都相同-->
		<view v-if="currentTab==item.type">
			<!-- <image class="box-image" mode="aspectFill" :src="item.imgeUrl"></image> -->
			<view> {{item.content}} </view>
			</view>
			</view>
		</view>
	</scroll-view>
</swiper-item>
</swiper>

二：JS层（javascript）

import datac from "../../data/ajax.js"
	export default {
		data() {
			return {
				ajax: datac,
				currentTab: 0, //标签初始位置
				scrollLeft: 0, //tab标题的滚动条位置			
				windowHeight: 0,
				windowWidth: 0,

				tabData: [ //标签数据
					{
						type: 0,
						title: "最新"
					},
					{
						type: 1,
						title: "热门"
					}
				],
				contentData: [] //内容数据	
			}
		},
		onLoad() {
			wx.getSystemInfo({ //获取系统信息
				success: (res) => {
					this.windowHeight = res.windowHeight
					this.windowWidth = res.windowWidth
				}
			});
			this.getData()
		},

		methods: {
			//点击切换
			clickTab(e) {
				let clickIndex = e.target.dataset.current //当前标签的索引
				let singleNavWidth = this.windowWidth / 2 //每个标签的宽度, 显示5个标签		
				this.scrollLeft = (clickIndex - 2) * singleNavWidth //水平滚动条位置, tab选项居中 

				if (this.currentTab === clickIndex) {
					return false;
				} else {
					this.currentTab = clickIndex //使页面对应标签	
					this.getData()
				}
			},

			//滑动切换
			swiperTab(e) {
				let swiperIndex = e.detail.current //当前页面的索引
				let singleNavWidth = this.windowWidth / 2 //每个标签的宽度 ,显示5个标签
				this.scrollLeft = (swiperIndex - 2) * singleNavWidth //使标签跟随页面滚动,超过屏幕范围的标签显示出来
				this.currentTab = swiperIndex //使标签对应页面
				this.getData()
			},

			//根据页面索引获取对应的云数据
			getData() {
				let type = this.currentTab
				if (datac.contentDate.code == 2000 || datac.contentDate == 2002) {
				var list = datac.contentDate.data
				if (list.length > 0) {
					for (var i = 0; i < list.length; i++) {
				var m = list[i]
				console.log("var" + type + "==" + m.type);
				if (type == m.type) {
					console.log("1" + JSON.stringify(list[i]))
		this.contentData = [];
		this.contentData.push(list[i])
	} else {
		this.contentData.push(list[i])
							}
						}
					}

				}
			},
			// 加载更多
			getMore() {
				//this.getData()
			}
		}
	}

三：css层

page {
		height: 100%;
		width: 100%;
	}

	.tab {
		/* 标签栏 */
		height: 80rpx;
		width: 100%;
		box-sizing: border-box;
		overflow: hidden;
		line-height: 80rpx;
		background: #f7f7f7;
		font-size: 16px;
		white-space: nowrap;
		/* 固定吸顶 position: fixed; */
		top: 0;
		left: 0;
		z-index: 99;
	}

	.tab-item {
		/* 单个标签 */
		width: 50%;
		display: inline-block;
		text-align: center;

	}

	.active {
		/* 选项卡活动时的样式 */
		color: #F65959;


		font-size: 20px;
	}

	.page-item {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		padding-top: 80rpx;
		padding-left: 16rpx;
	}

	.page-item-box {
		display: flex;
		flex-direction: column;
		height: 320rpx;
		width: 220rpx;

		/* background-color: #808080; */
		/* border:1px solid #cc22b0; */
		/* 边框 */
		border-radius: 5px;
		box-shadow: 0 2px 2px rgba(34, 25, 25, 0.4);
		/* 框阴影 */
		text-align: center;
		/* 居中对齐 */
		margin: 10rpx;
	}

	.box-image {
		height: 280rpx;
		width: 220rpx;
		border-radius: 5px;
	}

最后数据请求ajax.js

效果图：