欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序开发之自定义tabBar的实现

程序员文章站 2023-12-02 08:23:22
最近开发微信小程序,公司要求做一个类似闲鱼的tabbar,但是网上大多资料的tabbar都会在页面切换的时候重新渲染,所以我写了一个不会重新渲染的tabbar,有需要的直接...

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

在小程序的开发文档中,对tabbar是这样说明的:

如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabbar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。

tip:

1.当设置 position 为 top 时,将不会显示 icon

2.tabbar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

在实际开发过程中,小程序自带的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": [
    {
     "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 tabbar="{{tabbar}}"></tabbar>

到目前为止,自定义tabbar就完成啦,撒花!!!!!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。