uniapp自定义底部导航,uniapp可视化拖拽ui布局

　　UNI-APP开发(仿饿)开发课程：进入学习

　　推荐（免费）：uni-app开发教程

　　前言

　　本文首先介绍了uni-app项目中引入的全局样式的类型，即App.vue中引入的官方CSS样式库、自定义logo库和CSS动画库，然后介绍了全局样式的定义；在pages.json中；最后，开发了项目的导航栏。

　　一、App.vue引入全局样式

　　标准uni-app项目的目录结构如下：

　　cloudfunctions云函数目录

　　 符合vue组件规范的组件的uni-app组件目录

　　 comp-a.vue可重用组件

　　用于存储本地网页的hybrids目录

　　用于存储每个平台的专用页面的platforms目录

　　 存储pages业务页面文件的目录

　　 index

　　 index.vue索引页

　　 list

　　 list.vue列表页面

　　—静态存储静态资源(如图片、视频等)的目录。)被应用程序引用。注意：静态资源只能存储在这里。

　　& wxcomponents存储小部件组件的目录

　　main.js Vue初始化入口文件

　　App.vue应用程序配置，用于配置应用程序全局样式和监视器。

　　manifest.json配置打包信息，如应用程序名称、appid、徽标和版本。

　　pages.json配置页面类信息，如页面路由、导航栏、选项卡等。其中App.vue是uni-app的主组件，所有页面都在App.vue下切换，app . vue是一个页面入口文件。App.vue本身不是页面，不能写成视图元素。

　　这个文件的功能包括：调用应用生命周期函数，配置全局样式，配置全局存储globalData。

　　调用生命周期函数可以实现特定生命周期需要执行的很多动作，比如检测更新、网络监控、初始化数据等。onLaunch时，onHide可用于在应用程序在后台运行时暂停音乐和视频的播放。

　　样式、图标、动画等。可以引入到这个文件中。

　　1.引入官方CSS样式库

　　创建新的uni-app项目。模板是Hello uni-app。项目目录下有一个常用目录，下面有一个uni.css文件，就是官方的css样式库。在Community_Dating目录下新建一个common目录，将uni.css复制到common目录下。

　　同时需要将Hello uni-app项目静态目录下的uni.ttf字体文件复制到Community_Dating项目静态目录下。

　　如果需要直接使用样式、字体、素材等文件，可以直接点击添加QQ群。

　　63624318，从群文件夹uni-app实战之社区交友APP下载就行了。

　　此时可以在Community_Dating的App.vue文件中导入uni.css，如下：

　　脚本

　　导出默认值{

　　onLaunch: function() {

　　console.log(“应用程序启动”)

　　},

　　onShow: function() {

　　console.log(“应用程序显示”)

　　},

　　onHide: function() {

　　console.log(“应用程序隐藏”)

　　}

　　}/脚本样式

　　/*每个页面的通用CSS */

　　@导入url(。/common/uni . CSS )；/style2.引入自定义图标库

　　导入的图标主要是Iconfont (https://www.iconfont.cn/)提供的导入图标。

　　首先需要根据关键字搜索到需要的图标，并选择喜欢的图标添加到购物车中，然后将图标添加到购物车中的当前物品中(如果还没有物品，可以直接创建物品再添加)，然后将图标和样式下载到本地。

　　演示如下：

　　解压压缩包，将其中的iconfont.css复制到常用目录下，重命名为icon.css，并修改其内容，去掉与其他平台的兼容性，只保留base64的镜像，类似如下：

　　@ font-face { font-family: icon font ；

　　src:URL( data:application/x-font-woff 2；charset=utf-8；base64、d 09 gmgabaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaiconfont {

　　font-family: iconfont ！重要；

　　字体大小：16px

　　字体样式：正常；

　　-WebKit-字体-平滑：抗锯齿；

　　-moz-osx-font-smoothing:灰度；}.图标-守业：之前{

　　内容：" \ e681 "；}再在App.vue中导入font.css，如下：

　　脚本

　　导出默认值{

　　onLaunch: function() {

　　console.log("应用程序启动")

　　},

　　onShow: function() {

　　console.log("应用程序显示")

　　},

　　onHide: function() {

　　console.log("应用程序隐藏")

　　}

　　}/脚本样式

　　/*每个页面公共css */

　　/* 官方半铸钢钢性铸铁(铸造半钢)库*/

　　@导入url(./通用/uni。CSS’)；

　　/* 自定义图标库*/

　　@导入url(./通用/图标。CSS’)；/风格再在页数/索引/索引。某视频剪辑软件中使用导入的图标，如下：

　　模板

　　视角

　　 icon font icon-shou ye style= font-size:100 rpx；颜色：# 007 aff你好/短信

　　/view/templatescript

　　导出默认值{

　　data() {

　　返回{

　　}

　　},

　　onLoad() {

　　},

　　方法：{

　　}

　　}/脚本样式

　　/风格显示：

　　可以看到，显示了图标，并且可以自定义样式。

　　3.引入CSS动画库

　　动画库可以选择使用动画。CSS(https://动画。style/)。

　　直接访问加拿大下载半铸钢钢性铸铁(铸造半钢)文件，地址为https://cdnjs。云层耀斑。com/Ajax/libs/animate。CSS/4。1 .1/动画。CSS，右键选择另存为并保存即可，将其复制到普通目录下，再在App.vue中导入，如下：

　　脚本

　　导出默认值{

　　onLaunch: function() {

　　console.log("应用程序启动")

　　},

　　onShow: function() {

　　console.log("应用程序显示")

　　},

　　onHide: function() {

　　console.log("应用程序隐藏")

　　}

　　}/脚本样式

　　/*每个页面公共css */

　　/* 官方半铸钢钢性铸铁(铸造半钢)库*/

　　@导入url(./通用/uni。CSS’)；

　　/* 自定义图标库*/

　　@导入url(./通用/图标。CSS’)；

　　/* 动画库*/

　　@导入url(./普通/动画。CSS’)；/风格在使用时，需要给元素添加类，目前使用的是4.1.1版本的animate.css，需要添加基本类动画_ _动画，同时还需要根据选择的动画效果添加类为动画__动画名称，例如动画_ _橡皮筋，动画名称可以根据需要在https://animate.style/页面右侧选择，并点击复制即可，如下：

　　此时获取到的就是带动画__前缀的动画类名称。

　　索引。某视频剪辑软件中演示如下：

　　模板

　　视角

　　 icon font icon-shou ye style= font-size:100 rpx；颜色：# 007 aff你好/短信

　　view style= display:flex；对齐-内容：居中；填充：50rpx

　　view class= animate _ _ animated hover-class= animate _ _ rubber band style= border:5 rpx solid # 4cd 964；填充：20rpx 橡胶带点击效果/查看

　　/查看

　　view style= display:flex；对齐-内容：居中；填充：50rpx

　　view class= animate _ _ animated hover-class= animate _ _ swing style= border:5rpx solid # 4cd 964；填充：20rpx 摆动点击效果/查看

　　/查看

　　view style= display:flex；对齐-内容：居中；填充：50rpx

　　view class= animate _ _ animated hover-class= animate _ _ rotateindowleft style= border:5 rpx solid # 4cd 964；填充：20rpx 向左下角旋转点击效果/查看

　　/查看

　　/view/templatescript

　　导出默认值{

　　data() {

　　返回{

　　}

　　},

　　onLoad() {

　　},

　　方法：{

　　}

　　}/scriptstyle/style，其中hover-class属性用于指定按下的样式类。当hover-class=none 时，没有点击效果。

　　演示如下：

　　可以看到，动画效果实现了。

　　描述：

　　微信小程序对动画效果的支持度不高。真机测试可以选择安卓或者iOS。

　　还可以使用v-if条件呈现来实现动画效果，或者在呈现列表时添加动画效果。

　　二、设置全局属性globalStyle

　　Pages.json文件用于全局配置uni-app，定义页面文件路径、窗口样式、原生导航栏、底部原生tabbar等。

　　Pages.json如下：

　　{

　　pages :[//pages数组中的第一项表示应用程序的启动页面，引用：https://uniapp.dcloud.io/collocation/pages.

　　{

　　路径:页面/索引/索引，

　　样式:{

　　navigationBarTitleText :单一应用程序

　　}

　　}

　　],

　　globalStyle: {

　　navigationBarTextStyle :黑色，

　　navigationBarTitleText :单一应用，

　　navigationBarBackgroundColor : # f8f8f 8 ，

　　backgroundColor: #F8F8F8

　　}}如您所见，它存储为一个对象：

　　第一个属性是pages，用来定义所有页面，包括路径、样式等。

　　第二个属性是globalStyle，用于配置全局样式。请参考https://uniapp.dcloud.net.cn/collocation/pages?的属性和含义。id=globalstyle .

　　常见属性及其含义如下：

　　类型默认值描述NavigationBarbackgroundColorXcolor # f7f 7导航栏背景色(与状态栏背景色相同)NavigationBartextStyleStringWhite导航栏标题色和状态栏前景色，仅支持黑色/whitenavigationpartitletextstring无导航栏标题文字内容navigationStyleStringdefault导航栏样式，仅支持默认/自定义。即自定义取消默认的原生导航栏backgroundColorHexColor#ffffff下拉显示窗口背景色backgroundTextStyleStringdark下拉加载样式，仅支持dark/lightenablepulldownresh boolean first。是否要在ReachBottomDistanceNumber50页上打开下拉刷新？触发下拉触底事件时距页面底部的距离，公司只支持PXBackgroundColorToPhexcolor # ffffff顶部窗口的背景色(反弹反弹区域)，backgroundcolorthomexcolor # ffffff底部窗口的背景色(反弹反弹区域)，没有导航栏的titleImageString图片地址(替换当前文本标题)，https的图片链接地址pages.json必须在支付宝小程序中使用。配置如下：

　　{

　　pages :[//pages数组中的第一项表示应用程序的启动页面，引用：https://uniapp.dcloud.io/collocation/pages.

　　{

　　路径:页面/索引/索引，

　　样式:{

　　// navigationBarTitleText : uni-app

　　}

　　}

　　],

　　globalStyle: {

　　navigationBarTextStyle :黑色，

　　navigationBarTitleText:社区约会，

　　navigationBarBackgroundColor : # FFFFFF ，

　　backgroundColor: #FFFFFF

　　}}页面效果如下：

　　显然，显示了自定义的全局样式。

　　三、底部导航栏开发

　　底部的导航栏主要包括社区、动态、消息、我的四个模块。图标(未勾选和已勾选)需要准备，可以在iconfont上选择下载。以我的为例，演示如下：

　　下载4组图标并重命名后，需要在静态目录下新建一个tabbar目录，并将这些图标复制到这个目录下。

　　配置tabbar时，您可以参考文档https://uniapp.dcloud.net.cn/collocation/pages?Id=tabbar，具体配置如下：

　　(1)在页面目录中创建三个新页面：

　　直接右键页面选择新页面，以新闻页面为例：

　　并编辑pages/news/news.vue，如下所示：

　　模板

　　视角

　　动态页面/视图/模板脚本

　　导出默认值{

　　data() {

　　返回{

　　}

　　},

　　方法：{

　　}

　　}/scriptstyle/style如下重新配置pages.json:

　　{

　　pages :[//pages数组中的第一项表示应用程序的启动页面，引用：https://uniapp.dcloud.io/collocation/pages.

　　{

　　路径:页面/索引/索引，

　　样式:{

　　// navigationBarTitleText : uni-app

　　}

　　}

　　,{

　　路径:页面/新闻/新闻，

　　样式 :

　　{

　　navigationBarTitleText“:”，

　　“enablePullDownRefresh”:false

　　}

　　}

　　,{

　　路径：pages/msg/msg

　　样式：

　　{

　　导览标题文字：

　　启用下拉刷新：假

　　}

　　}

　　，>

　　路径：pages/my/my，

　　样式：

　　{

　　导览标题文字：

　　启用下拉刷新：假

　　}

　　}

　　],

　　全局样式：& gt

　　导览文字样式：黑色，

　　导览标题文字：社群约会，

　　导航条背景色：# ffff，

　　背景颜色：# ffff

　　},

　　表格：表格

　　颜色：323232,

　　所选颜色:# ed 6384，

　　背景色：# ffff，

　　「borderstyle」:「黑色」，

　　列表：[

　　{

　　页面路径：页面/索引/索引，

　　文字："首页-是啊

　　iconpath:static/tabbar/index。巴新，

　　selectediconpath:static/tabbar/indexed。png

　　},

　　{

　　页面路径：页面/新闻/新闻(页面/新闻/新闻),

　　文字："动态-是啊

　　iconpath:静态/tabbar/新闻。巴新，

　　selectediconpath:static/tabbar/newsed。png

　　},

　　{

　　页面路径：pages/msg/msg，

　　文字："消息-是啊

　　iconpath:static/tabbar/paper。巴新，

　　selectediconpath:static/tabbar/paper red。png

　　},

　　{

　　页面路径：pages/my/my，

　　文字："我的-是啊

　　iconpath:static/tabbar/home。巴新，

　　selectediconpath:static/tabbar/homed。png

　　}

　　]

　　}}显示：

　　显然，已经完成底部导航栏配置。

　　总结美元

　　uni app(大学应用程序)项目中应用程序视图是程序的入口文件，可以导入CSS(CSS)样式~我爱你~第三方的图标和动画库，从而加速开发；页：json文件用于配置页面文件的路径你好窗口样式和底部原生tabbar(酒吧)等，全局样式全球风格(全球样式)也在该文件中配置；实现了项目的社区你好动态你好消息和我的四个模块的导航栏设置。以上就是uni app(大学应用程序)介绍全局样式引入和底部导航栏开发的详细内容，更多请关注我们其它相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。