微信小程序开发---自定义tabBar

小烟 阅读:79 2024-11-18 17:57:04 评论:0

最近开发微信小程序,公司要求做一个类似闲鱼的tabbar,但是网上大多资料的tabbar都会在页面切换的时候重新渲染,所以我写了一个不会重新渲染的tabbar,有需要的直接拿走不谢。

使用步骤如下:

第一步:找到项目中的tabbarComponent目录,拷贝到你的工程中,然后将tabbarComponent->icon图标替换成你自己的tabbar图片

第二步:到app.json中配置tabBar,这里我就不细说了,只强调闲鱼的tabbar中间的按钮是跳到二级页面,所以不配置在tabBar的list中

第三步:在app.js的onLaunch方法中调用wx.hideTabBar();隐藏系统自带的tabBar

第四步:在app.js中的globalData中加入自定义tabbar的参数,再加入一个方法给tabBar.list配置中的页面使用,代码如下

globalData: {
    userInfo: null,
    tabBar: {
      "backgroundColor": "#ffffff",
      "color": "#979795",
      "selectedColor": "#1c1c1b",
      "list": [
        {
 

本文 zblog模板 原创,转载保留链接!网址:https://zuoshishipin.com/post/5.html

可以去百度分享获取分享代码输入这里。
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
排行榜
关注我们

扫一扫关注我们,了解最新精彩内容

客服微信:hnyanshan点击复制并跳转微信