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

why_rookie 发布于2019-08-23 11:46 / 913人阅读

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

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

使用步骤如下：

第一步：找到项目中的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": [
        {
          "pagePath": "/page/index/index",
          "iconPath": "icon/icon_home.png",
          "selectedIconPath": "icon/icon_home_HL.png",
          "text": "首页"
        },
        {
          "pagePath": "/page/myRelease/index",
          "iconPath": "icon/icon_release.png",
          "isSpecial": true,
          "text": "发布"
        },
        {
          "pagePath": "/page/mine/index",
          "iconPath": "icon/icon_mine.png",
          "selectedIconPath": "icon/icon_mine_HL.png",
          "text": "我的"
        }
      ]
    }
  }

editTabbar: function() {
    let tabbar = this.globalData.tabBar;
    let currentPages = getCurrentPages();
    let _this = currentPages[currentPages.length - 1];
    let pagePath = _this.route;
    (pagePath.indexOf("/") != 0) && (pagePath = "/" + pagePath);
    for (let i in tabbar.list) {
      tabbar.list[i].selected = false;
      (tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);
    }
    _this.setData({
      tabbar: tabbar
    });
  },

第五步：在tabBar的list中配置的页面的.js文件的data中加入tabbar:{}，并在onload方法中调用app.editTabbar();

第六步：在tabBar的list中配置的页面的.json文件中加入

"usingComponents": {

"tabbar": "../../tabbarComponent/tabbar"

}

在.wxml文件中加入

到目前为止，自定义tabbar就完成啦，撒花！！！！！

云服务器超融合服务器微信小程序开发微信小程序开发语言微信小程序开发免费微信小程序开发步骤

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97434.html

微信小程序开发过程中tabbar页面显示的相关问题及解决办法

摘要：在微信小程序的开发过程中如果有使用过的同学，我相信一定会遇到一些困扰。其他关于开发相关的问题可以看微信小程序开发教程教你微信小程序中如何实在的切换附源码微信小程序开发中底部导航栏的使用在微信小程序的开发过程中如果有使用过tabbar的同学，我相信一定会遇到一些困扰。为什么有些时候代码中明明已经在app.json里面增加了tabbar，可以页面中就是不显示呢？可不可以有些页面显示tab...

马永翠 2019-08-01 16:34 评论0 收藏0
微信小程序开发时的常见问题

摘要：微信小程序开发常见问题一项目结构微信小程序项目结构主要有四个文件类型如下是框架设计的一套标签语言，结合基础组件事件系统，可以构建出页面的结构。微信小程序开发常见问题？ showImg(https://segmentfault.com/img/bVbwbou?w=720&h=450);一：项目结构微信小程序项目结构主要有四个文件类型,如下 WXML （WeiXin Markup La...

qpwoeiru96 2019-08-26 10:41 评论0 收藏0
微信小程序开发时的常见问题

摘要：微信小程序开发常见问题一项目结构微信小程序项目结构主要有四个文件类型如下是框架设计的一套标签语言，结合基础组件事件系统，可以构建出页面的结构。微信小程序开发常见问题？ showImg(https://segmentfault.com/img/bVbwbou?w=720&h=450);一：项目结构微信小程序项目结构主要有四个文件类型,如下 WXML （WeiXin Markup La...

TNFE 2019-08-19 10:24 评论0 收藏0
微信小程序开发时的常见问题

摘要：微信小程序开发常见问题一项目结构微信小程序项目结构主要有四个文件类型如下是框架设计的一套标签语言，结合基础组件事件系统，可以构建出页面的结构。微信小程序开发常见问题？ showImg(https://segmentfault.com/img/bVbwbou?w=720&h=450);一：项目结构微信小程序项目结构主要有四个文件类型,如下 WXML （WeiXin Markup La...

tianyu 2019-08-30 15:44 评论0 收藏0
☀️苏州程序大白一文教你学会微信小程序开发☀️《❤️记得收藏❤️》

☀️苏州程序大白一文教你学会微信小程序开发☀️《❤️记得收藏❤️》目录 ?️‍?开讲啦！！！！?️‍?苏州程序大白?️‍??博主介绍?前言?讲讲专享小程序有什么优势？ ?小程序文件分析?事件绑定?图片问题?轮播图swiper?自定义组件?生命周期?页面生命周期?项目制作?缓冲事件?`es7 async`语法 ?触底事件❄️下拉刷新页面❄️css省略号❄️预览大图❄️购物车模拟❄️获取地...

刘明 2021-09-27 13:36 评论0 收藏0