其他分享
首页 > 其他分享> > uniapp--点击选项卡切换&&滑动切换

uniapp--点击选项卡切换&&滑动切换

作者：互联网

效果:

在这里插入图片描述

创建子组件vue文件tab-slide(选项卡部分):

html部分

①利用uniapp组件scroll-view横向滑动

<scroll-view class="uni-swiper-tab" scroll-x>

</scroll-view>

②遍历选项卡标题,用block标签(无样式意义,只用于列表渲染)
scrollStyle:父级样式设置

关于template和block的用法

<block v-for="(tab,index) in tabs" :key="tab.id" :style="scrollStyle">

</block>

③tab选项(name和下划线)

<view class="swiper-tab-list">
	{{tab.name}}
	<view class="swiper-tab-line"></view>
</view>

④为tab选项添加属性

<-- 绑定tab选项样式 -->
:style="scrollItemStyle"
<-- 绑定tab选项被选择后的样式 -->
:class="{'active':tabIndex==index}"
<-- 绑定tab选项的点击事件 -->
@tap="tabtap(index)"

整合代码:

<template>
	<view class="uni-tab-bar">
		<scroll-view class="uni-swiper-tab" scroll-x>
			<block v-for="(tab,index) in tabBars" :key="tab.id">
				<view
					class="swiper-tab-list"
					:class="{'active' : tabIndex == index}"
					@tap="tabtap(index)"
				>
					{{tab.name}}
					<view class="swiper-tab-line"></view>
				</view>
			</block>
		</scroll-view>
	</view>
</template>

script部分

①通过props接受父组件传递过来的数据

props:{
	tabs:Array,
	tabIndex:Number,
}

补充知识点:父组件传值给子组件用props;子组件传值给父组件用$emit

②编写点击事件:(向父组件提交一个事件和值)
在这里提交的事件在父组件中以@tabtap="tabtap"关联父组件

tabtap(index){
	this.$emit('tabtap',index)
}

整合代码:

<script>
	export default {
		name:"tab-slide",
		props: {
			tabBars:Array,
			tabIndex:Number,
		},
		methods:{
			// 点击切换导航
			tabtap(index){
				this.$emit('tabtap',index)
			}
		}
	}
</script>

css部分

①给横向滚动加一条下边框:

.uni-swiper-tab{
	border-bottom:1upx solid #EEEEEE;
}

②设置active时的字体颜色:

.active{
	color: #343434;
}

③设置active和line样式

.active .swiper-tab-line{
	border-bottom:6upx solid #5598E7;
	width: 70upx;
	margin: auto;
	border-top: 6upx solid #5598E7;
	border-radius: 20upx;
}

整合代码:

<style scoped>
	.uni-swiper-tab{
		border-bottom: 1upx solid #EEEEEE;
	}
	.active{
		color: #343434;
	}
	.active .swiper-tab-line{
		border-bottom: 6upx solid #5598E7;
		width: 70upx;
		margin: auto;
		border-top: 6upx solid #5598E7;
		border-radius: 20upx;
	}
</style>

父组件使用子组件tab-slide:

1. 使用子组件:

①import

import tabSlide from "../../components/tab-slide/tab-slide.vue";

②注册:

components: {
	tabSlide
},

③使用:(向子组件传递tabs,tabIndex,和tabtap事件)

<tab-slide :tabs="tabs" :tabIndex="tabId" @tabtap="tabtap"></tab-slide>

2. 编写父组件代码

html

<template>
	<view class="page">
		<tab-slide :tabBars="tabBars" :tabIndex="tabId" @tabtap="tabtap"></tab-slide>
		// 父组件代码
	</view>
</template>

①使用swiper组件(滑块视图容器,常用于轮播图)

:style 绑定样式
@change 绑定change方法(current 改变时会触发)
:current 绑定当前所在滑块的index

<swiper 
	class="swiper-box"
	:style="{height:swiperHeight+'px'}"
	@change="tabChange"
	:current=tabId>
</swiper>

②添加swiper-item(一级循环)

<swiper-item v-for="(items,index) in activity" :key="index">
	
</swiper-item>

③添加scroll-view组件(纵向滚动)

<scroll-view scroll-y class="list"></scroll-view>

④添加template组件(用于条件渲染)

<template v-if="ms.acCl.length > 0">
</template>

⑤添加view标签进行二次循环

<view class="activities" v-for="(item,index1) in items.acCl" :key="index1">

</view>

⑥填充需要展示的内容代码

整合代码:

<view class="uni-tab-bar">
	<swiper 
		class="swiper-box" 
		:style="{height:swiperheight+'px'}" 
		@change="tabChange"
		:current=tabId>
		<swiper-item v-for="(items, index) in activity" :key="index">
			<scroll-view scroll-y class="list">
				<template v-if="items.acCl.length > 0">
					<view class="acticities" v-for="(item,index1) in items.acCl" :key="index1">
						<view class="content-left">
							<image :src="item.img"></image>
						</view>
						<view class="content-right">
							<view class="name">{{item.name}}</view>
							<span class="status">{{item.status}}</span>
							<view class="time">{{item.time}} &nbsp;&nbsp;&nbsp;{{item.address}}</view>
						</view>
					</view>
				</template>
			</scroll-view>
		</swiper-item>
	</swiper>
</view>

script

①在data对象里添加数据

data(){
	return{
		swiperHeight:500,
		tabId:0,
		tabs:[],
		activity:[
			{
				items:[]
			},
			{
				items:[]
			}
			{
				items:[]
			}
		]
	}
}

②编写方法:

tabtap() 是点击选项卡切换
tabChange() 是滑动切换

methods: {
	tabtap(index){
		this.tabId = index;
	},
	tabChange(e){
		this.tabId = e.detail.current
	}
}

③动态计算高度(onLoad生命周期里面写)

onLoad(){
	uni.getSystemInfo({
		success:(res)=>{
			let height = res.windowHeight-uni.upx2x(100)
			this.swiperHeight = height;
		}
	})
}

整合代码:

<script>
import tabSlide from '../../components/tab-slide/tab-slide.vue';
export default {
	components: {
		tabSlide
	},
	data() {
		return {
			swiperheight:500,//高度
			tabId: 0,
			tabBars: [{},{},{}, {},{}],
			activity:[
				{acCl:[]},
				{acCl:[]},
				{acCl:[]},
				{acCl:[]},
				{acCl:[]}
			],
		}
	},
	onLoad() {
		uni.getSystemInfo({
			success:(res) => {
				let height = res.windowHeight-uni.upx2px(100)
				this.swiperHeight = height
			}
		});
	},
	methods: {
		tabtap(index){
			this.tabId = index;
		},
		tabChange(e){
			this.tabId = e.detail.current;
		}
	},
};
</script>

完整代码:

子组件:

<template>
	<view class="uni-tab-bar">
		<scroll-view class="uni-swiper-tab" scroll-x>
			<block v-for="(tab,index) in tabBars" :key="tab.id">
				<view
					class="swiper-tab-list"
					:class="{'active' : tabIndex == index}"
					@tap="tabtap(index)"
				>
					{{tab.name}}
					<view class="swiper-tab-line"></view>
				</view>
			</block>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name:"tab-slide",
		props: {
			tabBars:Array,
			tabIndex:Number,
			scrollStyle:{
				type:String,
				default:""
			},
			scrollItemStyle:{
				type:String,
				default:""
			}
		},
		methods:{
			// 点击切换导航
			tabtap(index){
				this.$emit('tabtap',index)
			}
		}
	}
</script>

<style scoped>
	.uni-swiper-tab{
		border-bottom: 1upx solid #EEEEEE;
	}
	.active{
		color: #343434;
	}
	.active .swiper-tab-line{
		
		border-bottom: 6upx solid #5598E7;
		width: 70upx;
		margin: auto;
		border-top: 6upx solid #5598E7;
		border-radius: 20upx;
	}
</style>

父组件:

<template>
	<view class="page">
		<tab-slide :tabBars="tabBars" :tabIndex="tabId" @tabtap="tabtap"></tab-slide>
		<view class="uni-tab-bar">
			<swiper 
				class="swiper-box" 
				:style="{height:swiperheight+'px'}" 
				@change="tabChange"
				:current=tabId>
				<swiper-item v-for="(items, index) in activity" :key="index">
					<scroll-view scroll-y class="list">
						<template v-if="items.acCl.length > 0">
							<view class="acticities" v-for="(item,index1) in items.acCl" :key="index1">
								// your code
							</view>
						</template>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
import tabSlide from '../../components/tab-slide/tab-slide.vue';
export default {
	components: {
		tabSlide
	},
	data() {
		return {
			swiperheight:500,//高度
			tabId: 0,
			tabBars: [{},{},{}, {},{}],
			activity:[
				{acCl:[]},
				{acCl:[]},
				{acCl:[]},
				{acCl:[]},
				{acCl:[]}
			],
		}
	},
	onLoad() {
		uni.getSystemInfo({
			success:(res) => {
				let height = res.windowHeight-uni.upx2px(100)
				this.swiperHeight = height
			}
		});
	},
	methods: {
		tabtap(index){
			this.tabId = index;
		},
		tabChange(e){
			this.tabId = e.detail.current;
		}
	},
};
</script>

<style scoped lang="scss">
</style>

标签：uniapp,tabId,选项卡,tabtap,index,切换,tab,组件,border
来源： https://blog.csdn.net/aoteman_web/article/details/116234368