微信小程序之二——底部选项卡的制作（ToolBar）

最新推荐文章于 2024-01-04 09:18:43 发布
最新推荐文章于 2024-01-04 09:18:43 发布
阅读量3.4k 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 微信小程序 文章标签： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Dela_bai/article/details/81488646
本文介绍如何在小程序中配置toolBar，包括设置选项卡数量、样式、图标等关键信息。通过app.json文件定义tabBar属性，可以实现最多五个选项卡的自定义布局。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在小程序里只能设置一个toolBar，在app.json中配置。

先看代码：

"tabBar":{

  "list":[

  {

    "pagePath":"pages/firstpage/firstpage",

    "text":"首页",

    "iconPath": "/pages/image/u241.png",

    "selectedIconPath": "/pages/image/u108.png"

  },

  {

    "pagePath":"pages/mine/mine",

    "text": "我的",

    "iconPath":"/pages/image/u113.png",

   "selectedIconPath":"/pages/image/u243.png"

  }

  ]

}

 

toolBar里是一个list数组，list[{},{},{}...],最多有五个标签，最少两个，{}里面设置每个选项卡的样式，

"pagePath":"XXX" 是表示页面路径， "text":"XX" 表示选项的内容，"iconPath": "XX.png" 表示选项的图标，默认是未被选中的， "selectedIconPath": "XX.png" 表示选中时的图标，这两项后面都要加图片的后缀名；

这样就可以显示了，之后再慢慢在两个页面里设计样式。

 

MFC案例：自制工具条(Toolbar)按钮的小程序
m0_72128260的博客
06-25 1040
在基于对话框的MFC项目中，自制三个 Toolbar 按钮（用颜色区分，分别为红、绿、蓝）；程序运行时，单击红色按钮显示一个红色的填充椭圆；再单击绿色按钮则进行清屏；最后单击蓝色按钮退出程序。
微信小程序——设置背景图片
desongzhang的博客
03-01 1231
项目希望实现如上效果， 使用vant的picker组件 而源码是这样的： <view class="van-picker__cancel" hover-class="van-picker__cancel--hover" hover-stay-time="70" data-type="cancel" bindtap="emit" > {{ cancelButtonText }} </view> <view wx:i.
微信小程序之自定义导航toolbar添加home键
qq_34907249的博客
11-17 1693
toBarHeight: 44, //标题栏高度：安卓：48px，iOS：44px;单位必需跟胶囊按钮一致用px。statusBarHeight: 44, //状态栏初始高度。-- 状态栏高度 -->-- 标题栏高度 -->// 手机状态栏的高度。
微信小程序---toobar的使用
weixin_34293246的博客
05-31 172
2019独角兽企业重金招聘Python工程师标准>>> ...
小程序学习之路第一步——底部选项卡toolBar实现
wen710516644的博客
11-23 855
小程序学习之路第一步——底部选项卡toolBar实现在app.json中配置tabBar参数1、代码示例2、参数说明3、页面展示效果 在app.json中配置tabBar参数 1、代码示例 "tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "首页", "ic...
小程序 显示Toobar
weixin_33857230的博客
11-26 219
要实现的效果 在 下面app.json 中加下列代码 "tabBar": { "color": "#7A7E83", "selectedColor": "#3cc51f", "borderStyle": "black", "backgroundColor": "#ffffff", "list": [ { "pagePath": "pages/...
源码uni-app 微信小程序根据角色动态的更改底部tabbar
03-24
1.包含小程序完整项目流程 2.两个角色切换登录 3.登录，登录记录，账号注册，选择公司，存取记录，授权名单，项目列表，盘点，盘点柜子，储物仓列表，我的等功能页面源码。
微信小程序tabbar图标素材
04-18
在微信小程序中，TabBar 是一个至关重要的组件，它位于小程序页面底部，通常包含固定的一组功能入口，如首页、分类、购物车、个人中心等，为用户提供便捷的操作导航。 TabBar 图标是用户界面设计中的关键元素，它们...
微信小程序踩坑记——Vant Weapp组件的使用
qq_40903080的博客
08-24 8121
微信小程序踩坑记——Vant Weapp组件的使用 组件名称 vant weapp 官方文档：Vant Weapp文档 预览 组件介绍 Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。 Vant 是有赞的一套移动端组件库，而Vant Weapp则是Vant的小程序版本，使用体验相对来说还是...
微信小程序的云笔记平台设计与实现.docx
06-16
《微信小程序的云笔记平台设计与实现》 微信小程序作为移动互联网时代的一种轻量级应用，因其无需安装、即用即走的特点，深受用户喜爱。本文主要探讨的是如何利用微信小程序构建一个云笔记平台，旨在提供更为灵活、...
toolbar实例程序(两种动态创建toolbar的方法，还有带提示的toolbar)
02-20
toolbar实例程序： １）两种动态创建toolbar的方法 ２）带提示的toolbar 经过编译运行验证　非常好
小程序tabBar示例
05-31
小程序自定义babBar示例，两种模式，至于样式可以根据自己项目需求进行改写
微信小程序自定义 tabbar
Azhangyuaner的博客
04-28 972
一定的需求情况下，无法使用小程序原生的 tabbar 的时候，需要自行实现一个和 tabbar 功能一模一样的自制组件。 查阅了海量的博客和文档之后，亲自踩坑。总结了三种在不使用微信小程序原生 tabbar 的情况下自制 tabbar 的方法。并说说这几种方法各自的特色。 类 navigator 跳转方式 类 navigator 跳转方式是我自己起的名称，因为它的实现思路就是这个样子的。期初...
微信小程序动态tabBar实现：基于自定义组件，灵活支持不同用户角色与超过5个tab自由组合（更新版）
热门推荐
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
01-04 1万+
在开发小程序过程中，有个需求是，小程序底部的tabBar需要根据不同用户角色显示不同底部导航。这里不用管tabBar的list超过5个，因为后面是使用自定义组件，完全接管 tabBar 的渲染。2、本示例是7个底部导航，分2种权限，权限1显示1，2，3；权限2显示4，5，6，7；3、当然你也可以自由其他组合，比如：权限1显示1，4；权限2显示1，2，3，4；另1种权限显示4个按钮（这里做的是显示4，5，6，7导航）1种权限显示3个按钮（这里做的是显示1，2，3导航）修改好权限后，记得要重新编译哦。
ToolBar的使用
chen19960724的博客
09-11 1039
参考： http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1118/2006.html http://blog.youkuaiyun.com/guolin_blog/article/details/18234477 可结合：Menu的使用一起食用 一、ToolBar的简介 Goole用来替代原来的ActionBar的控件。为了向
微信小程序自定义tabbar以及闪烁问题
胡世林的博客
11-05 7208
微信小程序的标题栏，具体描述不需要太多解释，但是很多时候，不满足于默认的配置的时候，需要我们手动的去绘制一个tabbar。比如一般社交平台软件会要求中间有一个突出的发布按钮，此时就需要重新定制下tabbar了。
微信小程序底部选项卡/导航栏实现方法
OZCNO的博客
12-05 1万+
今天必须要写这篇文章，太坑了！微信小程序底部选项卡/导航栏的实现方法！ 不过还是总结的说，就不说我经历了什么了。。 首先，在历经我一系列改革之后写出来的代码//nav_tp.wxml <template name="nav"> <view class="nav_container"> <navigator wx:for="{{navbar}}" data-idx="{{index}}
微信小程序（第六章）- 导航栏和tabBar的实现
weixin_42178241的博客
01-18 431
微信小程序（第六章）- 导航栏的实现作用app.json文件属性 作用 通过微信小程序根目录下的app.json文件用来对对微信小程序进行全局配置。 app.json文件 属性 app.json 文件，文件内容为一个JSON对象；JSON是以key：value形式存在的； ...
微信小程序自定义底部导航栏
JIZQAQ学习&踩坑笔记本
08-31 1739
目标：首页没有底部导航栏，仅仅在部分页面有底部导航栏。发现微信小程序自带的tabbar无法实现该目标。 经过搜索之后发现了这篇文章，在这篇的基础上进行补充和改进。 https://blog.youkuaiyun.com/alertqian/article/details/71711453 作为一个微信小程序的新手，改了这篇里的代码还是不进行显示。看到评论里有人提到需要在index.wxml中也需要引入。...
editorjs 微信小程序
最新发布
03-19
### 微信小程序中使用 Editor.js 富文本编辑器 微信小程序原生支持 `editor` 组件，用于实现富文本编辑功能[^1]。然而，`Editor.js` 是一个独立的 JavaScript 库，主要用于 Web 开发环境下的富文本编辑需求。由于微信小程序运行在特定环境中，无法直接引入外部库如 `Editor.js`。 以下是关于如何在微信小程序中实现类似 `Editor.js` 功能的方法： #### 方法一：基于微信小程序原生组件 `editor` 可以通过配置和扩展微信小程序自带的 `editor` 组件来满足大部分富文本编辑的需求。以下是一个简单的实现示例： ```html <!-- wxml 文件 --> <view class="container"> <editor id="editor" class="ql-editor" bindstatuschange="onStatusChange" show="true"></editor> </view> ``` ```javascript // js 文件 Page({ data: { editorCtx: null, }, onReady() { this.editorCtx = wx.createSelectorQuery().in(this).select('#editor'); this.editorCtx.context((res) => { this.setData({ editorCtx: res.context }); }).exec(); }, onStatusChange(e) { console.log('状态变化', e.detail); } }); ``` 此方法利用了微信小程序官方提供的 `editor` API 和事件处理机制[^2]。 --- #### 方法二：自定义封装类 `Editor.js` 风格的功能模块 虽然不能直接使用 `Editor.js`，但可以模仿其工具栏设计风格并结合微信小程序的 `editor` 实现类似的交互体验。具体步骤如下： 1. **创建工具栏按钮** 使用 `button` 或其他 UI 控件模拟工具栏中的操作按钮（加粗、斜体、插入链接等）。 2. **绑定点击事件到编辑器上下文中** 利用 `wx.createSelectorQuery()` 获取编辑器实例，并调用相应方法完成样式修改或内容插入。例如： ```javascript this.data.editorCtx.format('bold'); // 设置选中文本为加粗 ``` 3. **动态更新内容** 当用户输入或更改内容时，监听 `bindinput` 事件以实时捕获最新数据。 --- #### 示例代码片段 以下展示了一个简单工具栏与编辑器联动的例子： ```html <!-- 工具栏部分 --> <view class="toolbar"> <button type="default" bindtap="handleBold">B</button> <button type="default" bindtap="handleItalic">I</button> </view> <!-- 编辑器部分 --> <editor id="editor" class="ql-editor" bindstatuschange="onStatusChange" show="true"></editor> ``` ```javascript Page({ data: { editorCtx: null, }, onReady() { const query = wx.createSelectorQuery().in(this); query.select('#editor').context((res) => { this.setData({ editorCtx: res.context }); }).exec(); }, handleBold() { this.data.editorCtx.format('bold'); }, handleItalic() { this.data.editorCtx.format('italic'); }, onStatusChange(e) { console.log('状态变化:', e.detail); } }); ``` --- #### JSON 配置文件 为了优化用户体验，在页面对应的 `.json` 文件中设置导航栏标题和其他属性： ```json { "navigationBarTitleText": "富文本编辑", "disableScroll": true } ``` 上述配置能够提升界面一致性[^3]。 --- ### 注意事项 - 小程序内置的 `editor` 不完全兼容所有浏览器端的行为逻辑，因此某些高级特性可能需要额外开发。 - 如果确实需要完整的 `Editor.js` 支持，则需考虑将其移植至 H5 页面并通过 WebView 嵌入小程序中[^4]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值