- app.js里怎么设置globalData的值,就像page里setData一样
app.js里怎么设置globalData的值,就像page里setData一样
2017-05-22 - 小程序自定义tabBar(类似咸鱼)
在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> 作者: honey缘木鱼
2019-01-10