E企盈营销工具技术服务商 热线:4006-838-530

小程序自定义tabBar(类似咸鱼)

E企盈直播平台营销卖货系统

在App上做类似咸鱼的Tabbar时,只能用自定义的方法,考虑小程序中如果想自定义像咸鱼这样的Tabbar,该如何实现呢?网上搜索的大多资料的tabbar都会在页面切换的时候重新渲染,下面的方法页面跳转时不会闪。效果图下载地址:https://github.com/dt8888/tabbar具体实现方法:1.分装一个tabbar的组件属性列表实现项目的Tabbar的个数,文字,颜色,图片大小最好用官网推荐的81px*81px的icon。JS关键代码为:properties: {    tabbar: {      type: Object,      value: {        “backgroundColor”: “#ffffff”,        “color”: “#979795”,        “selectedColor”: “#1c1c1b”,        “list”: [          {            “pagePath”: “pages/index/index”,            “iconPath”: “icon/icon_home.png”,            “selectedIconPath”: “icon/icon_home_HL.png”,            “text”: “首页”          },          {            “pagePath”: “pages/middle/middle”,            “iconPath”: “icon/icon_release.png”,            “isSpecial”: true,            “text”: “发布”          },          {            “pagePath”: “pages/mine/mine”,            “iconPath”: “icon/icon_mine.png”,            “selectedIconPath”: “icon/icon_mine_HL.png”,            “text”: “我的”          }        ]      }    }  },2.在App.js中的onLaunch方法中 用wx.hideTabBar();隐藏系统自带的tabbar,点击时作为按钮选中的判断方法为:editTabbar: function () {    let tabbar = this.globalData.tabBar;    let currentPages = getCurrentPages();    let _this = currentPages[currentPages.length – 1];    let pagePath = _this.route;    if(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:1.找到项目中的tabbarComponent目录,放到自己的工程中,然后将tabbarComponent->icon图标替换成你自己的tabbar图片,文字颜色根据需求做适当的更改。2.app.json中配置tabBar,因为点击发布时做的页面跳转,不配置在tabBar的list中。3.在app.js中的globalData中加入自定义tabbar的参数,再加入一个方法给tabBar.list配置中的页面使用。4.在页面的JS中的data中加入tabbar:{},并在onload方法中调用app.editTabbar();5.页面的.json文件中加入代码”usingComponents”: {“tabbar”: “../../tabbarComponent/tabbar”}6.在页面的.wxml文件中加入<tabbar tabbar=”{{tabbar}}”></tabbar>

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序自定义tabBar(类似咸鱼)
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏