Java教程

3 - 标签导航、组件制作与使用;和 基础的常用ui组件

本文主要是介绍3 - 标签导航、组件制作与使用;和 基础的常用ui组件,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

标签式导航

 

 准备菜单图标(每个图标有选中和未选中两种),放在项目的static目录中

pages目录中创建(四个)对应的页面文件并在pages.json文件中配置注册,同时也要在pages.json文件中设置tabBar栏的样式

 

 

 组件

组成页面的零件,具有复用性,利用参数实现差异性变化,uniapp具有 eacycom 机制(传统vue组件需要安装、引用、注册,三个步骤才能使用组件, easycom 将其精简为一步)

在项目的文件夹中创建目录文件 components(与pages、static等文件目录平级),组件必须放在这个命名的文件夹下,就可以全局使用,而无需提前注册。

 

 

 

生命周期

uniApp 的生命周期分 3 类(应用级别:App.vue;页面级别:模仿微信小程序;组件级别:vue组件)

1. 应用级别生命周期在项目的 App.vue文件中

 

 

2. 页面的生命周期,监听页面,举例如下(具体较多,官网查看)

 再例如:mounted(){ console.log('mounted  组件挂载完毕...') };

 

 

 3. 组件生命周期,监听组件,例如下(具体较多,官网查看)

 

ui 组件

uni 官网中组件查询,其中视图容器库中的组件和小程序官方提供的组件一样;扩展组件库是 uni 针对实际开发做的组件补充库

使用扩展组件时创建新的项目模板要勾选 uni-ui项目 (在默认项目基础上添加一套扩展的组件库),创建后会多出一个 uni_modules 的文件夹,这个文件夹就是相关的组件库

 

Badge 数字角标  uni-badge

 

注意:html 代码中都是字符串类型,js 代码中才有数据类型的概念 

  添加 is-dot 属性,不展示数字,只显示一个小点

  添加 :offset="[10,10]" 属性,控制小图标的移动位置

 

 

card 卡片

 另外还提供插槽组件,替代 note 属性。note 属性只能书写普通的文本,利用插槽可以自定义脚部的内容

 

 

 

uni-dateformat 日期格式化     (把日期转化为人容易识别的格式)

 也可以规定一个预支,在某个时间段之内,显示 刚刚 | 马上

 

 

 

collapse 折叠面板

 

 还可以给 uni-collapse 标签添加 accordion 属性(手风琴效果),表示当这一组中只有当前点击的这一个是展开的效果

 

 

 

NoticeBar 通知栏

 

 

这篇关于3 - 标签导航、组件制作与使用;和 基础的常用ui组件的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!