3.使用uView让tabbar更优雅

2024-05-14 00:20
文章标签 使用 优雅 tabbar uview

本文主要是介绍3.使用uView让tabbar更优雅,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

  • 1. 使用uView让tabbar更优雅
    • 1.1. 怎么才优雅?
    • 1.2. uView的tabbar合适吗?
    • 1.3. 引入项目过程
      • 1.3.1. 修改pages.json
      • 1.3.2. 把demo里面的pages先拷贝过来
      • 1.3.3. 引入tabbar的图片
      • 1.3.4. 运行
    • 1.4. 我们自己的项目适配

1. 使用uView让tabbar更优雅

1.1. 怎么才优雅?

为什么要做这个呢?起因还是因为我们自己做的tabbar都平平淡淡,没什么特色,然而,我们有时候看到有的小程序的tabbar,中间突出很大一块,是怎么做到的呢?

1.2. uView的tabbar合适吗?

  • tabbar底部导航栏:https://vkuviewdoc.fsq.pub/components/tabbar.html
  • 对应的demo:https://vkuviewdoc.fsq.pub/components/resource.html

动手下载运行起来看看效果:

效果还是非常好的,那就开始搞吧

1.3. 引入项目过程

1.3.1. 修改pages.json

主要就是改pages配置,把tabbar定义一下

{"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages// {// 	"path": "pages/index/index",// 	"style": {// 		"navigationBarTitleText": "uni-app"// 	}// }// uView的自定义tabbar demo{"path": "pages/index/index","style": {"navigationBarTitleText": "uView UI"}},{"path": "pages/js/index","style": {"navigationBarTitleText": "工具"}},{"path": "pages/template/index","style": {"navigationBarTitleText": "模板"}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},"uniIdRouter": {},// uView的自定义tabbar demo,定义tabbar"tabBar": {"color": "#909399","selectedColor": "#303133","backgroundColor": "#FFFFFF","borderStyle": "black","list": [{"pagePath": "pages/index/index","iconPath": "static/uview/example/component.png","selectedIconPath": "static/uview/example/component_select.png","text": "组件"},{"pagePath": "pages/js/index","iconPath": "static/uview/example/js.png","selectedIconPath": "static/uview/example/js_select.png","text": "工具"},{"pagePath": "pages/template/index","iconPath": "static/uview/example/template.png","selectedIconPath": "static/uview/example/template_select.png","text": "模板"}]}
}

1.3.2. 把demo里面的pages先拷贝过来

先拷贝,后面再删,主要是先运行起来。

其实也就是拷贝了3个文件,也没什么特别,好操作。

1.3.3. 引入tabbar的图片

同样,还是先拷贝过来,后面会改成我们自己的tabbar的图标。

把demo里的static/uview文件夹都拷贝过来。

1.3.4. 运行

就这么多,运行起来就是那样的效果:

1.4. 我们自己的项目适配

还是按照之前的套路:

  1. pages.json修改

    {"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages{"path": "pages/bill_add/bill_add","style": {"navigationBarTitleText": "记一笔"}},{"path": "pages/bill_list/bill_list","style": {"navigationBarTitleText": "账单"}},{"path": "pages/bill_chat/bill_chat","style": {"navigationBarTitleText": "图表"}},{"path": "pages/bill_detail/bill_detail","style": {"navigationBarTitleText": "明细"}},{"path": "pages/my/my","style": {"navigationBarTitleText": "我的"}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},"uniIdRouter": {},// uView的自定义tabbar demo,定义tabbar"tabBar": {"color": "#909399","selectedColor": "#303133","backgroundColor": "#FFFFFF","borderStyle": "black","list": [{"iconPath": "/static/tab-bar/账单.png","selectedIconPath": "/static/tab-bar/账单_h.png","text": "账单","pagePath": "pages/bill_list/bill_list"},{"iconPath": "/static/tab-bar/图表.png","selectedIconPath": "/static/tab-bar/图表_h.png","text": "图表","pagePath": "pages/bill_chat/bill_chat"},{"iconPath": "/static/tab-bar/记账.png","selectedIconPath": "/static/tab-bar/记账_h.png","text": "记账","pagePath": "pages/bill_add/bill_add"},{"iconPath": "/static/tab-bar/明细.png","selectedIconPath": "/static/tab-bar/明细_h.png","text": "账单","pagePath": "pages/bill_detail/bill_detail"},{"iconPath": "/static/tab-bar/我的.png","selectedIconPath": "/static/tab-bar/我的_h.png","text": "我的","pagePath": "pages/my/my"}]}
    }
    
  2. 写对应的pages vue文件

  3. 引入图标的png图片

  4. 最后的结果就是

这篇关于3.使用uView让tabbar更优雅的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/987225

相关文章

使用Dify访问mysql数据库详细代码示例

《使用Dify访问mysql数据库详细代码示例》:本文主要介绍使用Dify访问mysql数据库的相关资料,并详细讲解了如何在本地搭建数据库访问服务,使用ngrok暴露到公网,并创建知识库、数据库访... 1、在本地搭建数据库访问的服务,并使用ngrok暴露到公网。#sql_tools.pyfrom

使用mvn deploy命令上传jar包的实现

《使用mvndeploy命令上传jar包的实现》本文介绍了使用mvndeploy:deploy-file命令将本地仓库中的JAR包重新发布到Maven私服,文中通过示例代码介绍的非常详细,对大家的学... 目录一、背景二、环境三、配置nexus上传账号四、执行deploy命令上传包1. 首先需要把本地仓中要

Spring Cloud之注册中心Nacos的使用详解

《SpringCloud之注册中心Nacos的使用详解》本文介绍SpringCloudAlibaba中的Nacos组件,对比了Nacos与Eureka的区别,展示了如何在项目中引入SpringClo... 目录Naacos服务注册/服务发现引⼊Spring Cloud Alibaba依赖引入Naco编程s依

Java springBoot初步使用websocket的代码示例

《JavaspringBoot初步使用websocket的代码示例》:本文主要介绍JavaspringBoot初步使用websocket的相关资料,WebSocket是一种实现实时双向通信的协... 目录一、什么是websocket二、依赖坐标地址1.springBoot父级依赖2.springBoot依赖

Java使用Mail构建邮件功能的完整指南

《Java使用Mail构建邮件功能的完整指南》JavaMailAPI是一个功能强大的工具,它可以帮助开发者轻松实现邮件的发送与接收功能,本文将介绍如何使用JavaMail发送和接收邮件,希望对大家有所... 目录1、简述2、主要特点3、发送样例3.1 发送纯文本邮件3.2 发送 html 邮件3.3 发送带

使用DeepSeek搭建个人知识库(在笔记本电脑上)

《使用DeepSeek搭建个人知识库(在笔记本电脑上)》本文介绍了如何在笔记本电脑上使用DeepSeek和开源工具搭建个人知识库,通过安装DeepSeek和RAGFlow,并使用CherryStudi... 目录部署环境软件清单安装DeepSeek安装Cherry Studio安装RAGFlow设置知识库总

Python FastAPI入门安装使用

《PythonFastAPI入门安装使用》FastAPI是一个现代、快速的PythonWeb框架,用于构建API,它基于Python3.6+的类型提示特性,使得代码更加简洁且易于绶护,这篇文章主要介... 目录第一节:FastAPI入门一、FastAPI框架介绍什么是ASGI服务(WSGI)二、FastAP

Spring-AOP-ProceedingJoinPoint的使用详解

《Spring-AOP-ProceedingJoinPoint的使用详解》:本文主要介绍Spring-AOP-ProceedingJoinPoint的使用方式,具有很好的参考价值,希望对大家有所帮... 目录ProceedingJoinPoijsnt简介获取环绕通知方法的相关信息1.proceed()2.g

Maven pom.xml文件中build,plugin标签的使用小结

《Mavenpom.xml文件中build,plugin标签的使用小结》本文主要介绍了Mavenpom.xml文件中build,plugin标签的使用小结,文中通过示例代码介绍的非常详细,对大家的学... 目录<build> 标签Plugins插件<build> 标签<build> 标签是 pom.XML

JAVA虚拟机中 -D, -X, -XX ,-server参数使用

《JAVA虚拟机中-D,-X,-XX,-server参数使用》本文主要介绍了JAVA虚拟机中-D,-X,-XX,-server参数使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有... 目录一、-D参数二、-X参数三、-XX参数总结:在Java开发过程中,对Java虚拟机(JVM)的启动参数进