uniapp实现可滑动顶部选项卡

uniapp实现可滑动顶部选项卡

利用<scroll-view><swiper>实现可滑动顶部选项卡,实现效果类似下图:
在这里插入图片描述
这里,简单模拟一下,实现一个大致效果

一、构建顶部tab选项按钮步骤

  1. 使用<scroll-view>组件布局,横向滑动需要使scroll-x="true"
  2. 设置选项按钮的初始数据barNameList及当前默认第一个tab所在位置tabIndex
  3. 点击选项按钮获取当前下标值@click="ontabtap",切换状态
<scroll-view id="tab" scroll-x="true">
		<view v-for="(item,index) in barNameList" :key="item.id" class="tabName" :data-current="index" @click="ontabtap">
			<text class="tabName_text" :class="tabIndex == index?'active_text':''">{{item.name}}</text>
		</view>
</scroll-view>
<script>
	export default{
		data(){
			return{
				tabIndex:0,
				barNameList:[{
				    name: '待审核',
				    id: '0'
				}, {
				    name: '审核中',
				    id: '1'
				}, {
				    name: '已审核',
				    id: '2'
				},{
				    name: '全部',
				    id: '3'
				}]
			}
		},
		methods:{
			// scroll-view 点击 tab 时 改变下标
			ontabtap(e){
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.switchTab(index);
			},
			switchTab(index){
				if(this.tabIndex == index){
					return
				}
				this.tabIndex = index;
			}
		}
	}
</script>

二、构建下方swiper内容数据步骤

  1. 使用<swiper><swiper-item>组件布局
  2. 设置初始数据barContentList(假数据,项目中应该从接口中获取,此处只是为了方便看效果)
  3. 滑动swiper获取当前下标值@change="tabChange",切换状态
<swiper id="tabContent" :current="tabIndex" @change="tabChange">
	<swiper-item v-for="(item,index) in barContentList" :key="item.id">
		<view>
			<text>{{item.title}}</text>
			<text>{{item.statusLabal}}</text>
			<text>{{item.content}}</text>
		</view>
	</swiper-item>
</swiper>
<script>
	export default{
		data(){
			return{
				barContentList:[{
						id:"01",
						title:"标题1",
						status:"0",
						statusLabal:"待审核",
						content:"的声音如同风格与噶人菲亚特古"
					},
					{
						id:"02",
						title:"标题2",
						status:"1",
						statusLabal:"审核中",
						content:"大唐贵妃打瑞文u哦i"
					},
					{
						id:"03",
						title:"标题3",
						status:"2",
						statusLabal:"已审核",
						content:"大唐贵妃打瑞文u哦i"
					},{
						id:"04",
						title:"标题4",
						status:"3",
						statusLabal:"全部",
						content:"大唐贵妃打瑞文u哦i"
					}]
			}
		},
		methods:{
			// swiper滑动时改变下标
			tabChange(e){
				let index = e.target.current || e.detail.current;  // 获取到当前移动到第几个
				this.switchTab(index);
			},
			switchTab(index){
				if(this.tabIndex == index){
					return
				}
				this.tabIndex = index;
			}
		}
	}
</script>

style样式

<style>
	#tab{
		width: 100%;
		display: flex;
	}
	.tabName{
		text-align: center;
		width: 25%;
		display: inline-block;
		height: 80rpx;
		line-height: 80rpx;
		white-space: nowrap;
	}
	.tabName_text{
		display: inline-block;
		width: 100%;
		height: 100%;
	}
	.active_text{
		background-color: #FDDD9B;
		color: #FFFFFF;
	}
	#tabContent{
		width: 100%;
	}
</style>

两部分建立起效果连接的主要方法是通过点击tab或滑动swiper更改了下标值,将tabIndex值进行更新,因为二者都需要tabIndex值,所以一个改变了另一个也会随之改变,这样就实现了点击顶部tab下面内容会切换,滑动swiper顶部tab会切换二者同步的效果。
在这里插入图片描述
(丑丑的样式可忽略 ━━( ̄ー ̄*|||━━)

三、下面是请求接口形式的完整代码

<template>
	<view>
		<scroll-view id="tab" scroll-x="true">
			<view v-for="(item,index) in barNameList" :key="item.id" class="tabName" :data-current="index" @click="ontabtap">
				<text class="tabName_text" :class="tabIndex == index?'active_text':''">{{item.name}}</text>
			</view>
		</scroll-view>
		<swiper id="tabContent" :current="tabIndex" @change="tabChange">
			<swiper-item v-for="(item,index) in barContentList" :key="item.id">
				<view v-for="(listItem,listIndex) in item.data">
					<text>{{listItem.title}}</text>
					<text>{{listItem.statusLabal}}</text>
					<text>{{listItem.content}}</text>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				tabIndex:0,
				barNameList:[{
				    name: '待审核',
				    id: '0'
				}, {
				    name: '审核中',
				    id: '1'
				}, {
				    name: '已审核',
				    id: '2'
				},{
				    name: '全部',
				    id: '3'
				}],
				barContentList:[]
			}
		},
		methods:{
			onLoad() {
			    setTimeout(()=>{
			      this.barNameList.forEach((tabBar) => {
			          this.barContentList.push({
			              data: [],
			              isLoading: false,
			              refreshText: "",
			              loadingText: '加载更多...'
			          });
			      }); 
				  this.getList(0); // 默认初始获取第一个选项对应的数据
			    },350)
			},
			// 获取列表数据
			getList(index){
				let activeTab = this.barContentList[index];
				let list = [];
				// ......
				// 这里请求接口--> 获取数据返回值data--> list.push(data);
				// ......
				activeTab.data = activeTab.data.concat(list);
			},
			// swiper滑动时改变下标
			tabChange(e){
				let index = e.target.current || e.detail.current;  // 获取到当前移动到第几个
				this.switchTab(index);
			},
			// scroll-view 点击 tab 时 改变下标
			ontabtap(e){
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.switchTab(index);
			},
			switchTab(index){
				if(this.tabIndex == index){
					return
				}
				// 先清空前面访问的swiper的缓存,要不再次切换到之前访问过的tab的时候内容会显示多次
				this.barContentList[this.tabIndex].data = [];
				// 后赋值
				this.getList(index);
				this.tabIndex = index;
			}
		}
	}
</script>

<style>
	#tab{
		width: 100%;
		display: flex;
	}
	.tabName{
		text-align: center;
		width: 25%;
		display: inline-block;
		height: 80rpx;
		line-height: 80rpx;
		white-space: nowrap;
	}
	.tabName_text{
		display: inline-block;
		width: 100%;
		height: 100%;
	}
	.active_text{
		background-color: #FDDD9B;
		color: #FFFFFF;
	}
	#tabContent{
		width: 100%;
	}
</style>

可参考官网hello uniapp项目:https://hellouniapp.dcloud.net.cn/pages/template/tabbar/tabbar

  • 7
    点赞
  • 57
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值