uniapp多端插件：Tabs标签页 灵活配置 多端兼容 简单易用（与element-ui的Tabs 标签页使用一致）

• 概要
• Tips
• 支持的平台
• 使用示例
• Tabs Attributes
• Tabs Events
• Tab-pane Attributes
• 关注我，不迷路

概要

在做项目的过程中用到了tab切换，本想着去插件市场找一个直接现用，后面发现找到的tab切换并不是我想要的那种使用方式，于是我结合了element-ui中Tabs标签页的方式写了该组件。

Tips

1. 该插件使用的预编译，需要自行安装scss/sass插件。
2. 该插件同时兼容了VUE2和VUE3，hbuilderX 最好是更新到较新版本。
3. 由于组件重构升级，老用户需要更新插件的，需要注意参数，根据下面提供的参数修改即可。
4. 遵循uni_modules规范插件。
5. 如果发现组件有bug或者不完善可以留言交流。
6. uniapp插件git地址：https://gitee.com/my_dear_li_pan/my-uni-modules.git
7. 个人博客地址：https://blog.csdn.net/qq_42961150?spm=1011.2124.3001.5343

支持的平台

• H5、app-vue、微信小程序、百度小程序等小程序平台。
• 暂不支持nvue。
• cli脚手架项目是否可用，暂未测试。

使用示例

<template>
	<view>
		<custom-tabs :value="value" @change="changeIndex">
			<custom-tab-pane label="标签一" name="1">
				<view style="height: 100px;">内容0</view>
				<view style="height: 100px;">内容1</view>
				<view style="height: 100px;">内容1</view>
				<view style="height: 100px;">内容1</view>
				<view style="height: 100px;">内容1</view>
				<view style="height: 100px;">内容1</view>
				<view style="height: 100px;">内容1</view>
				<view style="height: 100px;">内容1</view>
				<view style="height: 100px;">内容1</view>
				<view style="height: 100px;">内容1</view>
			</custom-tab-pane>
			<custom-tab-pane label="标签二" name="2">内容2</custom-tab-pane>
			<custom-tab-pane label="标签三3" name="3">内容3</custom-tab-pane>
			<custom-tab-pane label="标签四44" name="4">内容4</custom-tab-pane>
			<custom-tab-pane label="标签五555" name="5">内容5</custom-tab-pane>
			<custom-tab-pane label="标签六6666" name="6">内容6</custom-tab-pane>
			<custom-tab-pane label="标签七77777" name="7">内容7</custom-tab-pane>
		</custom-tabs>
	</view>
</template>
<script setup>
    // #ifdef VUE3
	import { reactive, ref, watch } from 'vue';
	const value = ref(2);

	function changeIndex(e) {
		console.log('选中:', e)
	}
	// #endif
</script>
<script>
	// #ifdef VUE2
	export default {
		data() {
			return {
				value: 2
			}
		},
		methods: {
			changeIndex(e) {
				console.log('选中:', e)
			}
		}
	}
	// #endif
</script>

Tabs Attributes

Tabs Events

Tab-pane Attributes

----- 别忘记点赞哟，您的肯定就是对我最大的支持 END -----

关注我，不迷路

如果任何疑问的可以在评论区留言，还可以加QQ群交流：568984539，加群备注‘地区-名字-技术类型’。

更多前端等相关知识可关注我个人博客：https://blog.csdn.net/qq_42961150?spm=1011.2124.3001.5343

个人作品展示：

uniapp+vue3.2+unicloud开发微信小程序：皮皮虎去水印