当前位置: 首页 > news >正文

uni-app x开发商城系统,tabBar

一、概述

使用uni-app x框架开发的一款多平台支持的电子商务平台。它的主要特点是一次开发,多处使用,可以同时在Android,iOS,鸿蒙next,Web,微信小程序等多个平台上运行。

 

效果如下:

image

 二、tabBar

如果应用是一个多 tab 应用,可以通过 tabBar 配置项指定一级导航栏,以及 tab 切换时显示的对应页。

在 pages.json 中提供 tabBar 配置,不仅仅是为了方便快速开发导航,更重要的是在 App 和小程序端提升性能。在这两个平台,底层原生引擎在启动时无需等待 js 引擎初始化,即可直接读取 pages.json 中配置的 tabBar 信息,渲染原生 tab。

 

上面图片,底部展示的几个图标区域,就是tabBar

image

三、实现tabBar

目录结构

在pages目录,新建3个文件夹,cart,member,news,并在目录下,新增同名的uvue文件,结构如下:

./
├── cart
│   └── cart.uvue
├── index
│   └── index.uvue
├── login
│   └── login.uvue
├── member
│   └── member.uvue
└── news└── news.uvue

 uvue文件,保持默认,在view里面,写对应的名字即可,比如cart.uvue内容如下:

<template><view>购物车</view>
</template><script>export default {data() {return {}},methods: {}}
</script><style></style>

 

在static目录,新增目录icon,用来放图标文件。

./
├── cart-active.png
├── cart.png
├── home-active.png
├── home.png
├── member-active.png
├── member.png
├── news-active.png
└── news.png

这个文件,大家可以从网络上,剪切一个即可。

 

最后修改pages.json,这个才是重点。

完整内容如下:

{"pages": [ //pages数组中第一项表示应用启动页,参考:https://doc.dcloud.net.cn/uni-app-x/collocation/pagesjson.html
        {"path": "pages/index/index"// "style": {//     "navigationBarTitleText": "uni-app x"// }
        },{"path": "pages/login/login"},{"path": "pages/cart/cart"},{"path": "pages/member/member"},{"path": "pages/news/news"}],"globalStyle": {"navigationBarTextStyle": "white","navigationBarTitleText": "uni-app x商城","navigationBarBackgroundColor": "#fe9b95","backgroundColor": "#F8F8F8"},"uniIdRouter": {},"easycom": {"autoscan": true,"custom": {"^u--(.*)": "uview-plus/components/u-$1/u-$1.vue","^up-(.*)": "uview-plus/components/u-$1/u-$1.vue","^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue"}},"tabBar": {"selectedColor": "#fe9b95","color": "#c0c0c0","list": [{"text": "首页","pagePath": "pages/index/index","iconPath": "/static/icon/home.png","selectedIconPath": "/static/icon/home-active.png"},{"text": "资讯","pagePath": "pages/news/news","iconPath": "/static/icon/news.png","selectedIconPath": "/static/icon/news-active.png"},{"text": "购物车","pagePath": "pages/cart/cart","iconPath": "/static/icon/cart.png","selectedIconPath": "/static/icon/cart-active.png"},{"text": "会员","pagePath": "pages/member/member","iconPath": "/static/icon/member.png","selectedIconPath": "/static/icon/member-active.png"}]}
}

主要看tabBar相关参数:

  • color:tab 上的文字默认颜色
  • selectedColor:tab 上的文字选中时的颜色
  • list:tab 的列表,详见 list 属性说明,最少 2 个、最多 5 个 tab

 

其中 list 接收一个数组,数组中的每个项都是一个对象

  • text:tab 上按钮文字,在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
  • pagePath:页面路径,必须在 pages 中先定义
  • iconPath:图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,当 position 为 top 时,此参数无效,不支持网络图片,不支持字体图标
  • selectedIconPath:选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px ,当 position 为 top 时,此参数无效

 

最后,重新编译运行,底部的tabBar,就可以正常显示了。

 

http://www.hskmm.com/?act=detail&tid=32284

相关文章:

  • Delphi TscGPPageControl动态创建新页面与加载Frame框架
  • 静态方法访问类的实例成员
  • 2025年冷冻研磨仪厂家,研磨仪厂家排行,知名品牌介绍
  • 组织研磨仪厂家品牌推荐/知名品牌,组织研磨仪哪家好?
  • The World of Torrents (How it Works?)
  • 进口微量粘度计代理商推荐,优质供应商分享
  • 10月16日
  • 进口高温高压粘度计优质供应商,粘度计代理商推荐
  • Apache Doris 内部数据裁剪与过滤机制的完成原理
  • 2025 年循环烘箱厂家推荐榜:热风循环烘箱厂家聚焦节能智能,这家企业成多行业优选
  • 10.16
  • 2598. 执行操作后的最大 MEX——模运算
  • 2025通风天窗厂家推荐正鑫,专业定制工业厂房通风排烟系统
  • 阿里面试:Redis挂了怎么办?集群 节点挂,怎么 恢复数据? 多长时间 的数据 可能 丢失?
  • Ubuntu 上安装 PHP 环境
  • 2025年工业陶瓷厂家 TOP 企业品牌推荐排行榜,工业陶瓷,氧化铝陶瓷推荐这十家公司!
  • 2025年石墨干燥机厂家推荐榜:真空干燥机/振动流化床干燥机/闪蒸干燥机高效环保成主流,这家企业凭实力登顶
  • 2025年空调系统/锅炉房运维服务厂家最新权威推荐榜:专业托管运维与设备维修外包服务深度解析
  • 混乱的置换 解题报告
  • 我42岁才顿悟:穷人的富养是带娃到处旅游,富人的富养是教会这一项本事
  • 2025年10月环保板材品牌推荐:榜单聚焦西南龙头杰家
  • Dash to Dock
  • 2025 年碳纤维布厂家 TOP 企业品牌推荐排行榜,碳纤维布 / 建筑碳纤维布 / 加固碳纤维布 / 300 克碳纤维布 / 碳纤维加固布公司推荐!
  • 2025年10月龙骨机厂家最新推荐榜,轻钢,装配式建筑,高速,全自动,吊顶,隔墙,高精度,快装式,方通龙骨龙骨机推荐这十家公司!
  • 命令行AI编程工具Jules Tools发布解析
  • 2025年东莞脱模剂混合机厂家最新权威推荐榜:专业设备与高效服务深度解析,优质供应商联系方式全收录
  • 2025年破胶机厂家TOP企业品牌推荐排行榜,610,710,810,大型,自动型,低温环保,节能省电,自动打块,轮胎破胶机公司推荐
  • 2025年10月品牌设计公司推荐排行榜,聚焦企业综合实力与核心竞争力
  • 2025年3C铝型材厂家行业标杆:船舶铝材/电力铝材/3C铝材廊坊国美铝业,21项专利加持,全品类适配获五星推荐
  • 2025年工业机器人厂家最新权威推荐榜:专业集成与智能应用解决方案深度解析