uni-app封装组件以及组件的使用方法

最新推荐文章于 2024-08-01 12:59:31 发布

酸奶吖！

最新推荐文章于 2024-08-01 12:59:31 发布

阅读量4.1k

点赞数

分类专栏： uni-app

本文链接：https://blog.csdn.net/qq_45375420/article/details/109114640

版权

本文介绍了如何在uni-app中进行组件封装，步骤包括在components文件夹下创建自定义组件pagetab.vue，然后编写组件内部代码。组件包含一个显示tab的视图，根据传入的tabBars和tabIndex属性展示内容，并通过tabtap方法实现点击切换。使用时需导入组件并设置相关数据及事件监听。

摘要由CSDN通过智能技术生成

在这里插入图片描述
第一步在uni-app项目中的components文件中新建一个组件名为pagetab.vue
第二步：在子组件中写入自己想要封装的代码
``

<view class=“swiper-tab-list” :class="{‘active’ : tabIndex==index}" @tap=“tabtap(index)” :style=“scrollItemStyle”>
{ {tab.name}} { {tab.num?tab.num:""}}

`

tabBars tab的标题内容
tabIndex标题内容的索引值
scrollStyle父级样式设置
scrollItemStyle每一个tab内容样式设置

<script>
	export default {
		name: 'pagetab',
		props: {
			tabBars: Array,
			tabIndex: Number,
			scrollStyle: {
				type: String,
				default: ""
			},
			scrollItemStyle: