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

于 2025-02-18 22:42:45 发布
阅读量586 收藏 7
点赞数 3
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/luck332/article/details/145716235
版权

在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="flex flex-nowrap">
					<view v-for="(item, index) in tabDatas" :key="index" class="flex flex-wrap diygw-col-0 flex-direction-column items-center flex12-clz" @tap="selectTabs(index)">
						<text v-if="tabIndex == index" class="diygw-text-line1 diygw-col-24 gradual-red text6-clz">
							{{ item.title }}
						</text>
						<text v-if="tabIndex != index" class="diygw-text-line1 diygw-col-0 text2-clz">
							{{ item.title }}
						</text>
					</view>
				</view>
			</scroll-view>
			<scroll-view scroll-x :scroll-with-animation="true" enhanced :scroll-left="tabsScrollLeft" class="flex scroll-view flex-wrap diygw-col-24 flex5-clz">
				<view class="flex flex-nowrap">
					<view v-for="(item, index) in tabDatas" :key="index" class="flex flex-wrap diygw-col-0 flex-direction-column items-center flex6-clz" @tap="selectTabs(index)">
						<text v-if="tabIndex == index" class="diygw-text-line1 diygw-col-24 gradual-orange text7-clz">
							{{ item.title }}
						</text>
						<text v-if="tabIndex != index" class="diygw-text-line1 diygw-col-0 text8-clz">
							{{ item.title }}
						</text>
					</view>
				</view>
			</scroll-view>
			<scroll-view scroll-x :scroll-with-animation="true" enhanced :scroll-left="tabsScrollLeft" class="flex scroll-view flex-wrap diygw-col-24 flex3-clz">
				<view class="flex flex-nowrap">
					<view v-for="(item, index) in tabDatas" :key="index" class="flex flex-wrap diygw-col-0 flex-direction-column items-center flex4-clz" @tap="selectTabs(index)">
						<text v-if="tabIndex == index" class="diygw-text-line1 diygw-col-24 gradual-green text4-clz">
							{{ item.title }}
						</text>
						<text v-if="tabIndex != index" class="diygw-text-line1 diygw-col-0 text5-clz">
							{{ item.title }}
						</text>
					</view>
				</view>
			</scroll-view>
			<scroll-view scroll-x :scroll-with-animation="true" enhanced :scroll-left="tabsScrollLeft" class="flex scroll-view flex-wrap diygw-col-24 flex1-clz">
				<view class="flex flex-nowrap">
					<view v-for="(item, index) in tabDatas" :key="index" class="flex flex-wrap diygw-col-0 flex-direction-column items-center flex2-clz" @tap="selectTabs(index)">
						<text v-if="tabIndex == index" class="diygw-text-line1 diygw-col-24 gradual-blue text-clz">
							{{ item.title }}
						</text>
						<text v-if="tabIndex != index" class="diygw-text-line1 diygw-col-0 text3-clz">
							{{ item.title }}
						</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: { isshow: false },
				listNum: 1,
				list: {
					rows: [
						{
							id: 0,
							title: '',
							remark: '',
							img: '',
							content: null,
							cateId: 0,
							userId: 0,
							createTime: '',
							updateTime: '',
							deleteTime: null
						}
					],
					total: 0,
					code: 0,
					msg: ''
				},
				catesNum: 1,
				cates: {
					rows: [
						{
							id: 0,
							title: '',
							remark: '',
							img: '',
							userId: 0,
							createTime: '',
							updateTime: '',
							deleteTime: null
						}
					],
					total: 0,
					code: 0,
					msg: ''
				},
				tabIndex: 0,
				tabsScrollLeft: 0,
				tabDatas: [{ title: '关注' }, { title: '精选' }, { title: '推荐' }, { title: '热门' }, { title: '热门' }, { title: '热门' }, { title: '热门' }],
			};
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}

			this.init();
		},
		methods: {
			async init() {
				await this.listApi();
				await this.catesApi();
			},
			// 列表数据 API请求方法
			async listApi(param) {
				let thiz = this;
				param = param || {};

				//如果请求要重置页面，请配置点击附加参数refresh=1  增加判断如输入框回调param不是对象
				if (param.refresh || typeof param != 'object') {
					this.listNum = 1;
				}

				//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑
				let http_url = '/cms/api.article/list';
				let http_data = {
					pageNum: this.listNum,
					pageSize: 10,
					title_like: param.title_like || this.title
				};
				let http_header = {};

				if (this.cates.rows.length > 0 && this.utabs > 0) {
					let row = this.cates.rows[this.utabs];
					if (row.id) {
						http_data.cateId = row.id;
					}
				}

				let list = await this.$http.post(http_url, http_data, http_header, 'json');

				let datarows = list.rows;
				if (http_data.pageNum == 1) {
					this.list = list;
				} else if (datarows) {
					let rows = this.list.rows.concat(datarows);
					list.rows = rows;
					this.list = Object.assign(this.list, list);
				}
				if (datarows && datarows.length > 0) {
					this.listNum = this.listNum + 1;
				}
				this.globalData.isshow = true;
			},
			// 分类数据 API请求方法
			async catesApi(param) {
				let thiz = this;
				param = param || {};

				//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑
				let http_url = '/cms/api.cate/list';
				let http_data = {
					pageNum: this.catesNum,
					pageSize: 10,
					pageSize: param.pageSize || '20'
				};
				let http_header = {};

				let cates = await this.$http.post(http_url, http_data, http_header, 'json');

				cates.rows.unshift({ id: '', title: '全部' });

				this.cates = cates;
			},

			// 修改数据 自定义方法
			async editFunction(param) {
				let thiz = this;
				let index = param && (param.index || param.index == 0) ? param.index : thiz.index || '';
				this.form = JSON.parse(JSON.stringify(this.list.rows[param.index]));
				this.navigateTo({
					type: 'openmodal',
					id: 'modal'
				});
			},
			selectTabs(index) {
				this.tabIndex = index;
				//根据自己的选项卡动态调整下60大小
				let tabsScrollLeft = index * 60;
				if (index <= 2) {
					tabsScrollLeft = 0;
				}
				this.tabsScrollLeft = tabsScrollLeft;
			},
			selectTabs(index) {
				this.tabIndex = index;
				//根据自己的选项卡动态调整下60大小
				let tabsScrollLeft = index * 60;
				if (index <= 2) {
					tabsScrollLeft = 0;
				}
				this.tabsScrollLeft = tabsScrollLeft;
			},
			selectTabs(index) {
				this.tabIndex = index;
				//根据自己的选项卡动态调整下60大小
				let tabsScrollLeft = index * 60;
				if (index <= 2) {
					tabsScrollLeft = 0;
				}
				this.tabsScrollLeft = tabsScrollLeft;
			},
			selectTabs(index) {
				this.tabIndex = index;
				//根据自己的选项卡动态调整下60大小
				let tabsScrollLeft = index * 60;
				if (index <= 2) {
					tabsScrollLeft = 0;
				}
				this.tabsScrollLeft = tabsScrollLeft;
			}
		},
		onPullDownRefresh() {
			// 列表数据 API请求方法
			this.listNum = 1;
			this.listApi();

			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			// 列表数据 API请求方法
			this.listApi();
		}
	};
</script>

<style lang="scss" scoped>
	.text1-clz {
		margin-left: 10rpx;
		padding-top: 10rpx;
		padding-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		padding-bottom: 10rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
		padding-right: 10rpx;
	}
	.flex10-clz {
		padding-top: 10rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.flex12-clz {
		margin-left: 0rpx;
		margin-top: 0rpx;
		margin-bottom: 0rpx;
		margin-right: 10rpx;
	}
	.text6-clz {
		padding-top: 10rpx;
		border-bottom-left-radius: 120rpx;
		overflow: hidden;
		font-weight: bold;
		padding-left: 30rpx;
		padding-bottom: 10rpx;
		border-top-left-radius: 120rpx;
		border-top-right-radius: 120rpx;
		border-bottom-right-radius: 120rpx;
		padding-right: 30rpx;
	}
	.text2-clz {
		background-color: #f4f4f4;
		padding-top: 10rpx;
		border-bottom-left-radius: 120rpx;
		overflow: hidden;
		padding-left: 30rpx;
		padding-bottom: 10rpx;
		border-top-left-radius: 120rpx;
		border-top-right-radius: 120rpx;
		border-bottom-right-radius: 120rpx;
		padding-right: 30rpx;
	}
	.flex5-clz {
		padding-top: 10rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.flex6-clz {
		margin-left: 0rpx;
		margin-top: 0rpx;
		margin-bottom: 0rpx;
		margin-right: 10rpx;
	}
	.text7-clz {
		padding-top: 10rpx;
		border-bottom-left-radius: 120rpx;
		overflow: hidden;
		font-weight: bold;
		padding-left: 30rpx;
		padding-bottom: 10rpx;
		border-top-left-radius: 120rpx;
		border-top-right-radius: 120rpx;
		border-bottom-right-radius: 120rpx;
		padding-right: 30rpx;
	}
	.text8-clz {
		background-color: #f4f4f4;
		padding-top: 10rpx;
		border-bottom-left-radius: 120rpx;
		overflow: hidden;
		padding-left: 30rpx;
		padding-bottom: 10rpx;
		border-top-left-radius: 120rpx;
		border-top-right-radius: 120rpx;
		border-bottom-right-radius: 120rpx;
		padding-right: 30rpx;
	}
	.flex3-clz {
		padding-top: 10rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.flex4-clz {
		margin-left: 0rpx;
		margin-top: 0rpx;
		margin-bottom: 0rpx;
		margin-right: 10rpx;
	}
	.text4-clz {
		padding-top: 10rpx;
		border-bottom-left-radius: 120rpx;
		overflow: hidden;
		font-weight: bold;
		padding-left: 30rpx;
		padding-bottom: 10rpx;
		border-top-left-radius: 120rpx;
		border-top-right-radius: 120rpx;
		border-bottom-right-radius: 120rpx;
		padding-right: 30rpx;
	}
	.text5-clz {
		background-color: #f4f4f4;
		padding-top: 10rpx;
		border-bottom-left-radius: 120rpx;
		overflow: hidden;
		padding-left: 30rpx;
		padding-bottom: 10rpx;
		border-top-left-radius: 120rpx;
		border-top-right-radius: 120rpx;
		border-bottom-right-radius: 120rpx;
		padding-right: 30rpx;
	}
	.flex1-clz {
		padding-top: 10rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.flex2-clz {
		margin-left: 0rpx;
		margin-top: 0rpx;
		margin-bottom: 0rpx;
		margin-right: 10rpx;
	}
	.text-clz {
		padding-top: 10rpx;
		border-bottom-left-radius: 120rpx;
		overflow: hidden;
		font-weight: bold;
		padding-left: 30rpx;
		padding-bottom: 10rpx;
		border-top-left-radius: 120rpx;
		border-top-right-radius: 120rpx;
		border-bottom-right-radius: 120rpx;
		padding-right: 30rpx;
	}
	.text3-clz {
		background-color: #f4f4f4;
		padding-top: 10rpx;
		border-bottom-left-radius: 120rpx;
		overflow: hidden;
		padding-left: 30rpx;
		padding-bottom: 10rpx;
		border-top-left-radius: 120rpx;
		border-top-right-radius: 120rpx;
		border-bottom-right-radius: 120rpx;
		padding-right: 30rpx;
	}
	.container329152 {
	}
</style>

diygwcom
关注
LCHub：腾讯魔方tmagic-editor低代码可视化生成器，正式开源
实战AI智能体
05-12 4881
据 LCHub获悉：腾讯tmagic-editor是一个所见即所得的页面可视化编辑器，实现零代码/低代码生成页面，可以快速搭建可视化页面生产平台，让非技术人员可以通过拖拽和配置，自助生成H5页面、PC页面、TV页面，大大降低页面生产成本。 以下是腾讯视频会员业务基于tmagic-editor搭建的可视化页面搭建平台示意图。tmagic-editor已经用于腾讯视频会员、爱玩游戏、云视听极光、腾讯会议等十几个腾讯业务，每月生产和发布数百个页面。 基于可视化编辑器的页面生产流程 一、物料开发 主要是
UniApp可视化开发教程 | 学习如何低代码构建跨平台应用
luck332的专栏
08-11 1721
UniApp是一个使用Vue.js开发所有前端应用的框架，开发者可以编写一套代码，然后发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。UniApp的核心理念是“一套代码，多端运行”，大大减少了开发者的工作量和时间成本。
可视化UniApp 2.0 引入 UView Plus 组件库
weixin_38344204的博客
10-08 936
通过简单的点击操作，开发者可以将 UView Plus 组件轻松载入到设计器中，享受无的拖拽体验。UView Plus 是基于 Vue 3 的组件库，支持丰富的组件类型，用户可以在设计器中任意混搭，创造出独特的应用界面。
uniapp低代码可视化-动态万能表单-代码生成器
最新发布
luck332的专栏
02-18 585
在UniApp中创建一个自定义的“万能表单”是一项复杂的任务，因为“万能表单”通常意味着它能够动态地处理各种不同类型的输入字段，如文本框、选择框、单选按钮、多选按钮、日期选择器、手写签名、下拉列表、图片上传、评分控件、下拉列表、滑块等等。
uniapp 2.0可视化开发工具：提升跨平台应用开发效率的新篇章
chenchuang0128的博客
04-10 1477
uniapp 2.0的可视化开发工具，不仅支持微信小程序和H5页面的开发，还能直接生成uniapp代码，实现了真正的跨平台开发。在未来的发展中，我们可以期待可视化开发工具在以下几个方面进行进一步的优化和拓展：一是提供更多丰富的组件和样式选项，满足开发者更加多样化的需求；它不仅提高了开发效率，还降低了开发难度，使得更多的开发者能够参与到跨平台应用开发的行列中来。拖拽式界面设计：可视化工具提供了丰富的组件库，包括基础组件和表单组件等，开发者只需通过拖拽的方式，即可快速构建应用界面。
uniapp选项卡制作
cccbbbmmm的博客
12-23 836
你可以根据自己的需求，修改选项卡的样式、图标和文字，并在对应的。子组件来创建一个简单的选项卡。在uni-app中制作选项卡可以使用。属性，可以自定义选项卡的图标和文字。指令来决定显示哪个选项卡对应的内容。事件监听选项卡的点击事件，然后在。方法中切换当前选中的选项卡索引。在上面的示例中，我们使用了。标签中添加相关内容。
uniapp实现选项卡
精通前端技术，了解后端接口
05-21 294
【代码】uniapp实现选项卡。
DIYGW UniApp可视化工具：低代码时代的前端开发新体验
chenchuang0128的博客
05-15 1347
它降低了开发的门槛，提高了开发的效率，使得更多的人能够参与到前端开发的行列中来。随着低代码时代的到来，DIYGW UniApp可视化工具将会在未来的前端开发领域发挥越来越重要的作用。无论是产品经理、UI设计师，还是前端开发人员，都可以通过这个工具快速构建出专业的、独一无二的应用。然而，传统的前端开发方式往往需要深厚的编程基础，以及大量的时间和精力投入。丰富的组件模块：提供宫格列表、图文菜单、卡片、列表、轮播图等多种组件模块，满足用户的不同设计需求。和预置的模块，降低了开发的门槛，提高了开发的效率。
uniapp: vite配置rollup-plugin-visualizer进行小程序依赖可视化分析减少vender.js大小
q1003675852的博客
11-16 1503
本文主要记录uniapp: vite配置rollup-plugin-visualizer进行小程序依赖可视化分析减少vender.js大小
基于DIYGWUI的零代码可视化小程序及H5设计源码工具
09-28
这款工具是一款基于DIYGWUI的零代码可视化小程序及H5设计源码生成平台，汇集了1453个文件，涵盖JavaScript、Vue、微信小程序、CSS、HTML等多种编程语言和资源。其中，JavaScript文件410个，JSON文件251个，Vue文件...
uniapp-cascader
11-14
对于大数据量的级联选择，uniapp-cascader会智能地只加载可视范围内的选项，减少内存占用，提高应用的响应速度，从而提升用户体验。 6. **fmui-cascader**： 压缩包中的"fmui-cascader"可能是一个针对uniapp-...
低代码可视化-uniapp下拉组件-代码生成器
luck332的专栏
11-01 357
uniapp下拉组件在官方提供的例子通常是用picker组件来实现，但希望像html 里select组件一样，点击后直接在下方显示。为此我们扩展了select组件。
DIYGW UniApp低代码可视化平台：高效、灵活、安全的应用开发新途径
chenchuang0128的博客
06-29 842
同时，由于平台支持多端使用，该企业一次开发就得到了微信小程序、支付宝小程序和H5等多个平台的源码，大大提高了开发效率。同时，平台建立了多个活跃的QQ群，提供了微信群技术支持，为用户提供了便捷的交流和学习途径。使用DIYGW UniApp平台，用户只需一次设计，就能生成微信小程序、支付宝小程序、H5、WebApp等多种平台的源码，实现了真正的多端使用。在开发过程中，企业遇到了一些问题，但通过平台提供的微信群技术支持和B站上的演示视频，企业很快找到了解决方案。代码迭代快速，技术支持活跃。
uni-app day 3 自定义选项卡
baichaqinghuan的博客
04-05 489
uni-app day 3配置底部tabBar组件适配导航栏、小程序状态栏自定义图标选项卡组件 配置底部tabBar "tabBar": {//2-5个选项 "color": "#666", "selectedColor": "#f07373", "backgroundColor": "#fff", "list": [ { "pagePath": "pages/tabbar/index/index",//声明路径 "iconPath": "static/home
uniapp 选项卡
weixin_52428855的博客
11-02 340
<view class="end-title"> <view v-for="(item,index) in items" :key="index" :class="{btna:count == index}" @tap="change(index)"> {{item}} </view> </view> <view class="end-cont" :class="{dis:btnnum == 0}">　　0信息</view>..
uni-app选项卡
Uxiao7的博客
03-10 812
<template> <view class="Text_box"> <view class="horizonal-tab"> <scroll-view scroll-x="true" scroll-with-animation class="scroll-tab"> <block v-for="(item, index) in subjList" :key="index"> <view class="scroll-t.
低代码可视化-uniapp根据输入自动计算-代码生成器
luck332的专栏
10-28 1369
自定义方法实现total=price*num。这里由于我们用表单组件把两个输入组件装起来了所以字段标识会变成form.price,form.num。所以我们在自定义方法里实现是用this.total=this.form.price*this.form.num.
UniApp 2.0可视化开发工具：引领前端开发新纪元
chenchuang0128的博客
05-25 2429
近期，UniApp 2.0可视化开发工具迎来了重大升级，为开发者带来了更多优化和完善的功能。UniApp 2.0可视化开发工具的升级不仅带来了众多优化和完善的功能，还进一步推动了移动应用开发的发展。无论是代码优化、组件管理、轮播图样式、宫格布局还是事件绑定等方面，UniApp 2.0可视化开发工具都为开发者提供了更加便捷和高效的开发体验。UniApp 2.0可视化开发工具在代码生成方面进行了优化，减少了外链样式，使得生成的UniApp代码更加规范和整洁。这不仅提高了项目的可维护性，还提升了开发效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值