![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 81
前进道路上的程序猿
喜欢唱歌,热爱运动
展开
-
HTML5中indexedDB存储离线数据示例
简介indexedDB是HTML5 推出的一种轻量级的NoSQL数据库,具有易扩展、快速读写、成本低廉等特点使用var request = indexedDB.open('Html5IndexedDB',2);//创建一个数据库request.onerror = function(e) { console.log(e);}//监听错误事件request.onupgradeneeded = function(event) { var db = event.target.result; var原创 2021-12-04 10:30:25 · 952 阅读 · 0 评论 -
鸿蒙系统中的AdaptiveBoxLayout自适应盒子布局
前言AdaptiveBoxLayout是自适应盒子布局,该布局提供了在不同屏幕尺寸设备上的自适应布局能力,主要用于相同级别的多个组件需要在不同屏幕尺寸设备上自动调整列数的场景。该布局中的每个子组件都用一个单独的“盒子”装起来,子组件设置的布局参数都是以盒子作为父布局生效,不以整个自适应布局为生效范围。该布局中每个盒子的宽度固定为布局总宽度除以自适应得到的列数,高度为match_content,每一行中的所有盒子按高度最高的进行对齐。该布局水平方向是自动分块,因此水平方向不支持match_conte原创 2021-06-06 09:37:58 · 707 阅读 · 0 评论 -
鸿蒙实现拖拽组件的功能
文章目录前言准备实现拖拽功能前言对于拖拽功能,我们需要用到的是DraggedListener准备首先我们新建一个页面用于实现拖拽的功能然后弹窗中输入页面名称将页面的slice定义到MainAbility中public class MainAbility extends Ability { @Override public void onStart(Intent intent) { super.onStart(intent); super.se原创 2021-06-05 14:53:47 · 1832 阅读 · 5 评论 -
Harmony中PositionLayout确切位置布局
前言在PositionLayout中,子组件通过指定准确的x/y坐标值在屏幕上显示。(0, 0)为左上角;当向下或向右移动时,坐标值变大;允许组件之间互相重叠。原创 2021-06-05 10:31:40 · 591 阅读 · 4 评论 -
鸿蒙系统中StackLayout帧布局
文章目录前言前期准备创建页面StackLayout的使用定义布局定义子组件组件对齐场景展示前言StackLayout直接在屏幕上开辟出一块空白的区域,添加到这个布局中的视图都是以层叠的方式显示,而它会把这些视图默认放到这块区域的左上角,第一个添加到布局中视图显示在最底层,最后一个被放在最顶层。上一层的视图会覆盖下一层的视图StackLayout所包含组件可支持的XML属性见下表:参考文档:https://developer.harmonyos.com/cn/docs/documentation/原创 2021-06-02 22:06:06 · 4844 阅读 · 9 评论 -
鸿蒙系统中的TableLayout网格布局
文章目录前言前期准备创建页面tableLayout的使用定义布局定义text组件的样式定义text组件模拟器显示如下:设置行数和列数前言TableLayout是使用表格的方式划分子组件TableLayout的自有XML属性见下表参考文档:https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-layout-tablelayout-0000001060379893下面我们就以案例来展示其应用前期准备我们还原创 2021-06-02 21:23:15 · 691 阅读 · 1 评论 -
鸿蒙系统中DirectionalLayout线性布局
鸿蒙系统中DirectionalLayout线性布局前言前期准备新建项目新建线性布局页面排列方式垂直排列水平排列对其方式权重前言DirectionalLayout布局用于将一组组件(Component)按照水平或者垂直方向排布,能够方便地对齐布局内的组件。DirectionalLayout的自有XML属性以及所包含组件可支持的XML属性如下参考文档https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-l原创 2021-06-01 22:15:18 · 1695 阅读 · 4 评论 -
ionic5 路由跳转、跳转传值、返回上一页、返回到根
文章目录准备普通路由跳转路由跳转传值数值传递数值获取NavController 返回上一页使用NavController的back方法实现返回多次跳转返回问题及解决问题解决多个页面跳转到同一个页面的返回问题及解决问题返回到根准备我们在cmd中使用ionic start ionicdeme08 tab新家一个tab类型的项目普通路由跳转普通的路由跳转我们只需要用到routerLink就可以了首先我们新建一个页面ionic g page pinfopinfo.page.html:<io原创 2021-05-16 12:05:50 · 2092 阅读 · 0 评论 -
ionic5 ion-refresher下拉更新
前言在现实应用中,我们需要有上拉更新,通过上拉的操作触发请求事件,请求最新的数据进行加载,这里我们使用到的组件就是ion-refresher,参考资料如下:https://ionicframework.com/docs/api/refresher接下来,我们就从案例中来学习这样一个组件使用新建项目cmd中我们使用ionic start ionicdemo7来新建项目页面新建列表我们在ts中新建一个数组,并予以赋值,然后在页面中显示出来tab1.page.ts:tab1.page.原创 2021-05-15 22:29:39 · 254 阅读 · 0 评论 -
ionic5 上拉分页加载更多ion-infinite-scroll
在我们使用软件的时候,尤其是列表类型,常常一次性不会展示所有的内容,只有当我们上拉到最底下的时候生成转圈动态图,同时会发送请求数据,从而显示更多的信息,这时候就需要用到上拉分页加载跟多的组件ion-infinite-scroll参考资料https://ionicframework.com/docs/api/infinite-scroll下面我们在利用案例来实现这一功能准备新建项目我们使用ionic start ionicdemo06创建项目新建列表我们首先在ts中新建list数组变量,然原创 2021-05-14 21:07:10 · 504 阅读 · 3 评论 -
ionic5 中一个页面弹出另一个页面以及页面间的传值
前言要实现一个页面弹出另一个页面我们需要用到modal,参考资料:https://ionicframework.com/docs/api/modal下面我们用实际案例来验证这个功能准备新建modal页面ionic g page modal新建login组件ionic g component modal/components/login在tab1页面新建按钮链接到modal<ion-button [routerLink]="['/modal']"> 跳转到模态对话原创 2021-04-30 22:42:09 · 356 阅读 · 2 评论 -
ionic5中手势相关事件的使用
文章目录前言准备使用tap(点击)、press(按下)安装hammerjs在项目的src/main.ts中引入hammerjs在app.module.ts中引入HammerModule测试前言ionic5中的gestures手势事件包括:tap(点击)、press(按下)、pan(随着手指移动)、swipe(随着手指迅速移动)、rotate(旋转)、pinch(缩放)等准备首先我们在项目中新建一个页面用于演示手势的运用ionic g page gestures在tab1中新建按钮链接到ges原创 2021-04-28 21:41:56 · 572 阅读 · 2 评论 -
ionic5中actionSheet、toast、alert、loading等的使用
文章目录上拉菜单actionSheet 的使用新建页面新建按钮并添加点击事件ts中引入ActionSheetController并声明定义showAction方法不同平台显示效果Toast 提示框新建页面新建按钮并添加点击事件ts中引入ToastController 并声明ts中新建相应方法loading加载样式新建页面新建按钮并添加点击事件ts中引入loadingController并声明ts中新建相应方法alert弹窗新建页面新建按钮并添加点击事件ts中引入AlertController并声明ts中新建原创 2021-04-27 22:38:59 · 912 阅读 · 0 评论 -
ionic5 中组件内置颜色、自定义组件样式
准备我们使用ionic start ionicdemo04来新建一个项目我们使用ionic g page button来创建一个页面来测试内置颜色和自定义组件样式项目结构如下:接下来我们就在tab1页面上定义一个按钮用于跳转到button页面tab1.page.html<ion-button [routerLink]="['/button']"> 跳转到button页面</ion-button>默认颜色的使用ionic中有很多内置颜色可供选择,省去了原创 2021-04-24 09:47:09 · 791 阅读 · 0 评论 -
ionic5 侧边栏ion-menu组件以及底部tabs结合侧边栏ion-menu
文章目录说明侧边栏ion-menu组件的基本使用新建项目侧边栏ion-menu使用点击菜单按钮弹出侧边栏侧边栏ion-menuJS实现侧边栏打开功能页面加按钮给ion-menu定义menuId属性控制菜单的页面中引入MenuController 组件初始化构造函数对应方法中通过JS控制侧边栏底部tabs结合侧边栏ion-menu新建tab项目新建页面新建侧边栏给侧边栏菜单添加链接并使其点击后侧边栏关闭说明对于侧边栏的相关的相关使用可以参考文档https://ionicframework.com/docs原创 2021-04-22 22:12:47 · 812 阅读 · 0 评论 -
ionic5 中的日期组件ion-datetime
准备首先我们在项目中使用ionic g page datetime创建一个测试日期组件的页面然后,在tab1页面创建一个用于跳转到这个页面的按钮 <ion-button [routerLink]="['/datetime']"> 跳转到datetime页面 </ion-button>关于日期组件的使用可以参考文档https://ionicframework.com/docs/api/datetime日期组件默认样式我们在页面上使用ion-datetime原创 2021-04-20 21:57:52 · 1792 阅读 · 0 评论 -
ionic5 中搜索框组件searchbar和分段器组件segment
文章目录准备搜索框组件searchbar普通搜索框功能动态搜索框 animated输入类型color颜色搜索框防抖动debounce分段器组件segment定义双向绑定值切换页面切换准备首先使用ionic g page searchbar 和ionic g page segment生成两个页面用于测试搜索框组件和分段器组件然后在tab1页面新建连个按钮用于链接到这两个页面tab1.page.html:<ion-button [routerLink]="['/searchbar']">原创 2021-04-12 21:58:40 · 449 阅读 · 0 评论 -
ionic5中轮播图ion-slides、ion-slide的使用
这里写目录标题参考文档准备新建页面图片准备简单轮播图实现实现自动轮播的功能定义参数界面上使用该参数自动轮播干扰时停止问题的解决定义名称#slide引入ViewChild获取slide对象实现点击结束自动轮播实现点击按钮上下轮播图切换参考文档对于轮播图的实现,我们可以参考https://ionicframework.com/docs/api/slides的相关文档,这里有属性:事件:方法:准备新建页面首先我们在项目中使用ionic g page slides命令来创建一个用于展示轮播图的页面原创 2021-04-11 09:40:43 · 1663 阅读 · 1 评论 -
ionic5 表单相关组件(单行文本框、开关、多选按钮、下拉框、多行文本框)
这里写目录标题准备新建页面跳转创建表单信息的JSON字符串页面创建list页面展示peopleInfo单行文本框ion-input开关ion-toggle单选按钮组 ion-radio-group 、ion-radio多选按钮ion-checkbox下拉框ion-select、ion-select-option多行文本框 ion-textarea准备新建页面首先,我们项目中新建页面form如下:跳转接下来我们在tab1中新建按钮跳转只form页面<ion-button [routerLi原创 2021-04-09 21:14:44 · 1203 阅读 · 0 评论 -
ionic5列表组件
这里写目录标题前言普通列表新建页面并展示带箭头的列表line分组列表ion-item-divider列表中带图标ion-icon列表中带头像ion-avatar列表中的图片ion-thumbnail滑动列表组件ion-item-sliding、ion-item-options等前言在ionic前端开发中,我们常常需要使用列表组件来实现列表的功能,而ionic就很好的包装了一组列表组件用于实现列表的功能,ionic中的列表组件主要是ion-list、ion-item等组件,下面我们就利用代码来看一下是具体原创 2021-03-30 22:44:32 · 978 阅读 · 0 评论 -
ionic 按钮、导航等组件的使用
这里写目录标题ionic5中内置颜色介绍使用按钮expand设置按钮的宽度fill设置背景填充size设置按钮的大小mode 决定使用哪种平台样式按钮结合图标导航组件简介使用ionic5中内置颜色介绍首先介绍下ionic 5 内置颜色 可用在按钮、图标、导航等这些颜色的配置是在src\theme\variables.scss下使用在src\app\tab2\tab2.page.html下,我们新建一个按钮,配置其color="success"如下:最后在页面上表现的形式如下:按钮首原创 2021-03-27 18:56:29 · 448 阅读 · 0 评论 -
ionic5自定义公共模块
创建公共模块以及组件创建模块ionic g module module/slide创建组件ionic g component module/slideslide.module.ts中引入、声明组件和暴露组件src\app\module\slide\slide.module.ts:使用公共模块tabs1中应用和声明模块src\app\tab1\tab1.module.ts:tabs1中使用模块src\app\tab1\tab1.page.html我们可以看到tabs1页原创 2021-03-27 11:21:55 · 150 阅读 · 0 评论 -
ionic新增tbas页面
新建页面ionic g page tabs删除路由在src\app\app-routing.module.ts下将tab4路由删除在tabs下配置tabs4的路由src\app\tabs\tabs-routing.module.ts:新建tabs4的切换按钮在tabs页面中新建tabs4的切换按钮src\app\tabs\tabs.page.html:打开页面,我们可以看到新的tabs4页面如下:如果想要更换图标,可以去网站:https://ionicons.com/寻找原创 2021-03-27 10:55:12 · 96 阅读 · 0 评论 -
ionic5创建页面以及页面跳转功能
创建项目首先,在cmd中进入工作空间,再利用命令新建项目ionic start demo1 tabs新建页面进入demo1目录cd demo1利用命令创建页面ionic g page news实现页面跳转功能利用Visual Studio Code打开项目项目中我们可以在src-app下可以看到新建的news页面还可以看到在src\app\app-routing.module.ts下有自动配置了相应的路由实现页面跳转我们在tab1.page.html下新建一个按钮,在按原创 2021-03-27 10:22:22 · 498 阅读 · 0 评论 -
鸿蒙系统中的DependentLayout布局
文章目录概念使用新建AbilitySliceMainAbility设置相对于同级组件相对于父组件概念DependentLayout中每个组件可以指定相对于其他同级元素的位置,或者指定相对于父组件的位置。使用我们使用代码来解释DependentLayout布局的使用新建AbilitySlice首先,我们再项目中新建一个DependentLayoutDemo如下:public class DependentLayoutDemo extends AbilitySlice { private原创 2021-02-26 16:48:07 · 1543 阅读 · 0 评论 -
鸿蒙系统中的DirectionalLayout布局
文章目录概念使用新建AbilitySlice排列方式垂直排列水平排列对齐方式权重使用概念DirectionalLayout用于将一组组件(Component)按照水平或者垂直方向排布,能够方便地对齐布局内的组件。DirectionalLayout的排列方向(orientation)分为水平(horizontal)或者垂直(vertical)方向。使用orientation设置布局内组件的排列方式,默认为垂直排列使用我们使用代码来解释DirectionalLayout布局的使用新建Abili原创 2021-02-26 14:46:02 · 2182 阅读 · 0 评论 -
鸿蒙简单组件的使用(Text、Button、RadioButton、Checkbox、Progress、Slider、TextField)
对于原创 2021-02-08 15:56:33 · 1247 阅读 · 0 评论 -
鸿蒙使用DataAbility访问数据库
最近,在学习鸿蒙系统的时候,学到DataAbility的时候一直卡住,原因是文档写的不是太清楚,通过查询不同的资料,终于能利用DataAbility访问数据库了本项目目标是在表盘上点击按钮就能访问DataAbility的查询方法查询数据库的内容新建DataAbility首先选中文件夹,右键新建Empty Data Ability弹窗输入Data Ability的名称,并勾选Visible确定后,可以看到新建的UserDataAbility打开后可以看到它是继承了Ability的,并且有默认原创 2020-11-10 17:59:34 · 5434 阅读 · 1 评论 -
开发鸿蒙的第一个Hello World的Java页面以及页面间跳转功能实现
新建项目选择模板首先我们打开DevEco Studio,新建项目,选择wearable和Empty feature ability(java)如图所示->点击next输入项目名称我们在下一页中project name填hello->点击next新建样式在hello-entry-src-main-resources-base右击新建一个Directoy,如图所示将新的directory名称取为layout右击layout新建有个xml文件,如图所示,文件名称为main_lay原创 2020-09-30 14:42:26 · 4305 阅读 · 1 评论 -
SpringBoot整合视图层技术
整合Thymeleaf什么是thymeleaf?thymeleaf是一个Java模板引擎,支持HTML原型,他可以让开发人员在没有后台数据的情况下直接用浏览器打开就能查看样式,也可以根据后端提供的数据查看显示效果SpringBoot整合Thymeleaf创建工程,添加spring-boot-start-web和spring-boot-thymeleaf依赖<dependency&g...原创 2020-03-04 19:12:53 · 288 阅读 · 0 评论 -
在IE11中easyui中一键打开多个tags时页面不显示的问题
最近,在工作中遇到了一个前端的问题:点击按钮弹出五个tags页面,但是在IE10中,除了最右边的tags正常外,其余四个页面都出现了空白,但是这个问题在IE8上面是没有的;实现步骤:1.使用for循环生成tag页面,代码大致如下:for(var i = 0;i < 5;i++) { //TODO 异步发送请求并生成tabs}2.异步发送请求并声称tabs代码大致如下$cf.aj...原创 2020-01-02 19:26:18 · 316 阅读 · 1 评论