微信小程序uniapp，vant-weapp中Tab 标签页简单使用和修改title文字大小

微信小程序uniapp，vant-weapp中Tab 标签页简单使用和修改title文字大小

前提：在uniapp项目中，安装vant-weapp

方法一：官方文档中的快速上手中有教程
网址：https://vant-contrib.gitee.io/vant-weapp/#/quickstart
方法二：搜索其他大佬的教程

第一步：在pages.json页面引入（其他组件引入也是相同的）

依照文档需要"van-tab"和"van-tabs"
vant-weapp，tab标签页网址：https://vant-contrib.gitee.io/vant-weapp/#/tab
代码如下（示例）：

		{
			"path": "pages/circle/circle",
			"style": {
				"usingComponents": {
					"van-tab": "/wxcomponents/vant/dist/tab/index",//""中为这是组件存放的位置，依照个人情况修改
					"van-tabs": "/wxcomponents/vant/dist/tabs/index"//标签页
				},
				"navigationBarTitleText": "标题",//页面的标题
			}
		},

提示：""中路径为这是组件在项目中存放的位置，依照个人情况修改

---

第二步：在页面使用

代码如下（示例）：

<template>
	<view class="lx_tab">
		<view class="nav">
			<van-tabs :active="active" @change="onChange">
				<van-tab title="关注">关注</van-tab>
				<van-tab title="推荐">推荐</van-tab>
			</van-tabs>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 1,//默认选中标签的标识符
			}
		},
		onLoad() {

		},
		methods: {
			//点击事件
			onChange(event) {
				console.log("event", event)
			},
		},
	}
</script>

提示：可以在console中查看打印的event中的内容

<style lang="scss" scoped>
	//修改tab标签页中title文字的样式
	/deep/.van-ellipsis {
		font-size: 30rpx;//字体大小
		font-weight: bold;//字体加粗
	}
</style>

---

学疏才浅，如有错误，敬请各位大佬斧正