首页 > 其他分享 >【HarmonyOS】低代码平台组件拖拽使用技巧之页签容器

【HarmonyOS】低代码平台组件拖拽使用技巧之页签容器

时间:2023-11-21 11:35:30浏览次数:58  
标签:容器 代码 HarmonyOS 内容 切换 之页 组件 拖拽 页面

​【关键字】

HarmonyOS、低代码平台、Tabs、TabContent、页签导航

 

1、写在前面

前面几篇分别介绍了低代码平台中的堆叠容器、滚动容器、网格布局等三种容器的使用,实际开发中我们经常会有这样的需求,页面底部是三个Tab按钮点击时会分别切换不同的视图内容,本篇我们就来介绍低代码平台为我们提供的一种可以快速实现页面试图切换的容器——页签容器,需要注意的是,页签组件是需要配合页签内容来使用的,话不多说,开整。

 

2、开发实战

老规矩,操作部分的内容我会尽量用动态图来完整体现整个过程。

首先我们进入到低代码平台的页面编辑区,从左侧组件树中拖拽一个页签容器到画布中,修改宽高的属性,然后依次拖入3个页签内容组件到页签容器中,按顺序鼠标绿色指针靠最右侧边界处时松开鼠标,在右侧属性面板中“页签位置”的属性设置上选择“结束”选项,将页签置于页面底部,如下图所示:

1.gif

然后我们依次选中每一个页签内容,在右侧属性面板中的上方部位有“图片内容”和“文字内容”这两项设置,我们分别为每个页签内容的tabs设置不同的图片和文字,如下图所示:

2.gif

最后我们选中首页的页签内容组件,在它的内部拖入一个文本组件,修改宽高和文本显示位置,填入“首页内容”的文本,如下图所示:

3.gif

最后以同样的方式为剩余的两个页签内容设置对应文本,用来在页面切换时区分不同的页面,方便我们更清晰的查看页面切换时的效果,实际开发中肯定是需要根据设计需求来拖入不同的组件实现需求了。

最后来看一下我们实现的效果吧:

4f.gif

OK,通过以上步骤,我们就可以很快的实现页面切换的效果了,今天的内容就这么多,下期再会!

标签:容器,代码,HarmonyOS,内容,切换,之页,组件,拖拽,页面
From: https://www.cnblogs.com/mayism123/p/17846222.html

相关文章

  • 【HarmonyOS】低代码平台组件拖拽使用技巧之列表
    ​【关键字】HarmonyOS、低代码平台、组件拖拽、列表、列表项 1、写在前面我们在日常开发中使用最多的组件可能就是列表组件了,现在几乎所有的应用都离不开列表,那么今天我们就来介绍一下如何利用低代码平台来实现列表的展示,列表实际上也是容器的一种,需要注意的是,列表是需要结......
  • 【HarmonyOS】低代码平台组件拖拽使用技巧之常用基础组件(上)
    ​【关键字】HarmonyOS、低代码平台、组件拖拽、常用基础组件、基础容器 1、写在前面之前是花了一些时间介绍了在低代码平台中滚动容器、网格布局、页签容器、列表这几种容器的拖拽技巧及使用方法,今天我会继续来介绍咱们在应用开发中可能会经常用到的一些基础容器和基础组件,......
  • vue实现会议室拖拽布局排座
    会议室拖拽布局排座是vue-draggable结合vue-draggable-resizable-gorkys进行开发vue-draggable是拖拽组件,可以在组件里拖动排序,也可以多个组件之间拖动排序vue-draggable-resizable-gorkys是一更强大的拖拽组件,可以随意拖拽,有点坐标先进行会议室的布局然后对某个会议进行人......
  • 实现多个大文件拖拽上传+大文件分片上传+断点续传+文件预览
    技术关键词前端:@vue/cli-service+element-ui+axios后端:node.js+koa思路分析拖拽上传拖拽上传是利用HTML5新特性实现拖拽上传,详细用法可阅读MDN-drag利用dragover事件(当某物被拖动的对象在另一对象容器范围内拖动时触发此事件)和drop事件(在一个拖动过程中,释放鼠标键时......
  • HarmonyOS 实战项目
    引言本章将介绍如何在HarmonyOS上进行实际项目开发。我们将从项目需求分析开始,逐步完成项目的设计、开发、测试和上线过程。目录项目需求分析项目设计项目开发项目测试项目上线总结1.项目需求分析项目需求分析是项目开发的关键阶段之一,它有助于确定项目的范围、目......
  • 鼠标拖拽拖动盒子时,与盒子内某些点击事件冲突问题解决
    问题:拖动时会触发圆球的点击事件解决鼠标拖动盒子时,将moving设为true意为正在拖动盒子,此时将class="move"遮挡容器展示在悬浮球上层,以覆盖悬浮球,此时也就不存在触发悬浮球点击事件的冲突了;鼠标拖动完盒子弹起时再将 moving设为false意为不在拖动盒子(遮挡容器class=......
  • 一个可以拖拽缩放的div?
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="viewport"content="width=de......
  • ElementUI的Dialog弹窗实现拖拽移动功能
    在项目中使用el-dialog中发现不能够拖拽移动,因此网上找了相关资料,使用自定义指令实现拖拽功能。1、创建自定义指令:新建文件directive/el-drag-dialog/index.jsimportdragfrom"./drag";constinstall=function(Vue){Vue.directive("el-drag-dialog",drag);};if(wind......
  • VMware(Windows系统)不能复制粘贴拖拽
    1、先去把网上常见的方法看一遍,都不行。你再来试下面这个。2、wen.bat,通过共享文件放到虚拟机上,进行安装: 去百度网盘捞。链接:https://pan.baidu.com/s/1yokse5BUQ-by9azPGU_sJw?pwd=a123提取码:a123 3、然后就成功了。  共享文件: 本机电脑的IP,通过cmd去查ipco......
  • sortablejs拖拽功能
    官网:http://www.sortablejs.com/中文文档:https://www.itxst.com/sortablejs/neuinffi.htmlgithub地址如下:https://github.com/SortableJS/react-sortablejsimportReact,{FC,useState}from'react';import{ReactSortable}from'react-sortablejs';......