uniapp低代码可视化-自定义精美选项卡-代码生成器

在UniApp中创建自定义的可自由滚动的精美选项卡组件，你可以结合UniApp的组件、样式和逻辑来实现。实现这样的效果首先选到的是scroll-view、view、 text三个组件组成，接下来我们使用工具教大家实现。

模板复用

此组件我们已经发布至组件模板，即需搜索选项卡、找到我们这个组件即可快速复用。

实现选项卡效果

FLEX组件拖动至设计区

首先找到我们的flex组件拖至设计区，开启水平滚动属性即可变成scroll-view组件。

选项卡标题设置

选项卡标题存在选中标题、非选中标题，我们使用FLEX组件装起来。定义选项卡的数据tabDatas,tabScrollLeft,tabIndex等属性

选中、非选中效果样式位置

选项卡包括一个选中、一个非选中效果。我们采用文本内容来分别设置对应的样式。

选中、非选中判断显示

选中的时候tabIndex==index

非选中的时候tabIndex!=index

点击事件切换选中

组件扩展方法增加自己的选中方法实现this.tabIndex=index

绑定点击事件

调用方法传入index

友好滚动扩展属性

为了点击对应的选项卡滚动至对应的选项卡尽量保持中间位置，使用了scroll-view里scroll-left属性。在第一步找到开启水平滚动flex组件增加扩展属性:scroll-with-animation="true" enhanced :scroll-left="tabsScrollLeft"

生成源码

生成源码即可在hbuilder实时查看效果。

<template>
	<view class="container container329152">
		<view class="flex flex-wrap diygw-col-24 flex-direction-column">
			<text class="diygw-col-24 text1-clz"> 已绑定组件动态数据，导出源码起效。组件数据在上面一层扩组数据里，可以根据动态API的数据来绑定。使用时可删除此提示 </text>
			<scroll-view scroll-x :scroll-with-animation="true" enhanced :scroll-left="tabsScrollLeft" class="flex scroll-view flex-wrap diygw-col-24 flex10-clz">
				<view class