小程序自定义tabbar

最新推荐文章于 2024-04-17 21:00:54 发布
最新推荐文章于 2024-04-17 21:00:54 发布
阅读量630 收藏
点赞数 1
分类专栏： 小程序 前端开发 前端 文章标签： 小程序 前端开发  自定义组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36259513/article/details/80669364
版权
前端 同时被 3 个专栏收录
12 篇文章 0 订阅
订阅专栏
小程序
3 篇文章 0 订阅
订阅专栏
前端开发
3 篇文章 0 订阅
订阅专栏

最近写小程序新项目时，设计师给出了如下设计图

 

  

点击除中间的其他四个按钮切换页面，点击中间的按钮弹出actionsheet

查阅文档后发现小程序文档提供的tabbar无法实现该效果，所以只能自己动手写一个tabbar了

实现效果如下：

 

     
我将这个tabbar组件从项目中分离出来写了个demo
github代码地址：https://github.com/752848087coder/tabbar_demo

实现原理是在所有一级页面引入自定义tabbar组件，从而实现页面tabbar效果，但每次切换页面都会重新加载tabbar组件，

 

所以自定义tabbar存在切换时页面闪动的问题，如果大家有更好的解决方案请多多指教

 

 

 

前端小白 - GavinWu
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序自定义tabBar（实操）
SoulNone的博客
11-20 1万+
微信小程序自定义tabBar（实操）
微信小程序实现原生 tabbar 和自定义 tabbar
花铛
11-10 973
配置信息：在app.json中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。为了保证低版本兼容以及区分哪些页面是 tab 页，tabBar 的相关配置项需完整声明，但这些字段不会作用于自定义 tabBar 的渲染。{"text": "首页"}, {"text": "日志"}]},}
【微信小程序开发】自定义tabBar案例（定制消息99+小红心）_微信小程序 van-tabbar-item 动态设置info
最新发布
2401_84182271的博客
04-17 941
其实我们都需要配置好tabBar的，不管是不是自定义都需要在app.json的tarBar节点配置，我们可以自定义配置文件可以tarBar节点配置好完整属性，查看效果在细调，然后我们在创建自定义文件，编写代码，然后将我们刚刚配置的list节点放入的index.js的data中在index.wxml通过循环遍历改list数据实现效果，这种流程有几个好处在版本不兼容时等一些特殊情况，还是能基本显示效果，不用同时两处配置，在app.json节点配置list复制到index.js的data。
tabBar（微信小程序）
Syyynb的博客
06-26 7604
tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为:注意: tabBar中只能配置最少 2个、最多 5个 tab 页签
微信小程序tabbar图片路径问题
weixin_44898301的博客
08-15 7682
1. tabbar不支持网络路径 注意: tabbar不支持网络图片 这是官方说的, 所以我们要将文件夹建在pages中,使用就用: "pages/image/tb_home.png" 即可 我们键文件夹的时候尽量选择从开发者工具打开硬盘,不然容易图片路径出错 2. Expecting ‘STRING’,‘NUMBER’,‘NULL’,‘TRUE’,‘FALSE’,’{’,’[’, got ]...
微信小程序开发实战 ⑨（TabBar）
m0_61490399的博客
06-03 4481
tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。底部 tabBar顶部 tabBartabBar中只能配置最少 2 个、最多 5 个 tab 页签当渲染顶部 tabBar
小程序自定义tabbar如何显示隐藏
deep_zhuheihei的博客
07-05 4594
1.在自定义custom-tab-bar组件 index.js中添加 show 属性 2.在index.wxml中添加if语句 3.在需要使用dialog前调用–隐藏tabbar 4.在关闭dialog后 调用–显示tabbar
小程序 | 案例---自定义tabBar
不爱吃菜的菜菜的博客
10-15 2083
所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。通过数据监听器监听 sum 的变化，如果sum 有变化，就让 list 里面的info 进行变化。然后在渲染的时候，判断是否有 info ，如果有就渲染，没有的话就空字符串。用自定义组件的方式编写即可，该自定义组件完全接管 tabBar 的渲染。现在是只有消息页面需要图标，我们可以在 js 文件中为消息的对象中添加。当我们点击每个 tabBar 项的时候，会触发onChange 事件，
微信小程序自定义底部导航栏遮挡页面内容（已解决）
weixin_43889700的博客
05-04 6984
今天也是努力写毕设的一天~ 这几天在实现旅行日记的笔记详情界面，先实现了自定义的底部导航栏，在这里我使用的是iView Weapp，具体的介绍我放在这里了~ 快速上手 iView Weapp 跟着里面的介绍下载代码再放到自己的项目里就可以了，最方便吸引我的是，里面的icon图标点击就可以复制相关代码，(๑•̀ㅂ•́)و✧其他使用也很方便 点击展开，当文本过长就会遮挡文本，显示不了收起按钮。最终的解决办法是一个投机取巧的办法，利用一个view 做占位符 图中紫色框标记就是这个view 修改一下背景颜色，看
【微信小程序-原生开发】实用教程03-自定义底部导航（含自定义tabBar导航高亮需点击两次的解决方案）
朝阳39的博客
01-17 2242
自定义底部导航
小程序tabbar 自定义
03-01
微信小程序下方的突出Tabbar。客户要求下边的导航必须有凸出的效果，后来调用这个实现。里面有详细的使用步骤。
微信小程序官方动态自定义底部tabBar的例子
10-16
主要介绍了微信小程序官方动态自定义底部tabBar的例子，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
微信小程序自定义tabBar,中间圆形凸起
05-31
微信小程序原生的自定义tabBar组件，中间圆形凸起。支持darkMode，深色主题自适应 支持iPhoneX底部横线自适应
uniapp小程序自定义动态tabbar
04-08
uniapp小程序自定义动态tabbar
微信小程序 自定义tabbar (源码)
05-31
微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义...
微信小程序自定义tabBar组件开发详解
10-17
主要为大家详细介绍了微信小程序自定义tabBar组件开发，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序自定义tabBar遮挡底部内容简单处理方法
qq_18470209的博客
01-15 3472
自定义获取高度填充。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值