江苏龙网

  1. 主页 > 生活百科 > >

小程序自定义动态Tabbar导航栏

小程序

自定义动态Tabbar导航栏在默认的小程序开发中 ， 定义tabbar,需要在App.json中配置如下json：
"tabBar": {..."list": [{"text": "首页","iconPath": "/public/images/index.png","selectedIconPath": "/public/images/index-act.png","pagePath": "pages/job/index"}...]}一经配置 ， 无法修改 。你可以调用setTabBarItem 设置按钮文字、图片路径；就是无法动态设置跳转地址、tabbar个数 。
解决方案我们需要新建一个中间页面 ， 用来控制所有tabbar ， 把tabbar要关联的页面 ， 都用组件的方式来写 ， 这样 ， 我们只要在这一个页面里 ， 写个fix在底部的tabbar样式 ， 点击不同tab ， 显示不同组件 。
json文件{"usingComponents": {"home" : "/pages/job/index",// 首页"company" : "/pages/company/company",// 公司"message" : "/pages/chat/index",// 消息"mine" : "/pages/mine/index",// 我的"tabbar" :"/milfun/widget/custom-tab-bar", //自定义tabbar组件}}wxml文件<!-- wxml中 ， 把页面设置成组件 --><home wx:if="{{activeTab == 'home'}}">首页</home><company wx:if="{{activeTab == 'company'}}">公司</company><message wx:if="{{activeTab == 'message'}}">消息</message><mine wx:if="{{activeTab == 'mine'}}">我的</mine><!-- wxml中 ， 自定义tabbar组件 --><tabbar list="{{tabList}}" bindmytab="tabChange"></tabbar>js文件Page({data: {activeTab:'home'// company 、message、mine},onLoad: function (options) {let tmp = 1;// 用来控制显示不同方案的tabbarif( tmp === 1 ){// 显示第一套tabbarthis.setData({tabList:[{"name": "...","text": "...","iconPath": "...","selectedIconPath": "...","pagePath": "..."},...]})}else{// 显示第二套tabbarthis.setData({tabList:[{},...]})}}})上面展示的是中间页面的写法 ， 那正常页面如何改成组件页面呢？
页面改成组件写法其不同主要是在于js文件里面的写法不同 ， 所以我们只看js部分：
正常写法Page({data: {},onLoad: function (options) {},onShow: function (options) {},func1:function(e){console.log(e)},func2:function(e){console.log(e)},})组件写法Component({options: { // 为了使用全局css样式addGlobalClass: true,},data: {},/** 组件被创建时调用 ， 等同于上方的 onLoad*/attached: function (options) {},/** 组件内部方法 ， 等同于上方的自定义方法*/methods: {func1:function(e){console.log(e)},func2:function(e){console.log(e)},}}) 

小程序自定义动态Tabbar导航栏

文章插图
 
 
这样 ， 我们就实现了动态tabbar功能 ， tablist数据我们随时都可修改 ， 怎么跳转 ， 我们自己说了算！
 
输入框弹起页面上滑遇见上面这个问题 ， 我们的解决方案是：手动设置输入框位置 。
js文件// 输入框获取焦点foucus:function (e) {this.setData({typerHeight: e.detail.height})},// 输入框失去焦点blur:function () {this.setData({typerHeight: 0})},wxml文件<view class="tc-board"style="bottom:{{typerHeight}}px" >......</view>这样 ， 当输入框获取焦点时 ， 会获取到键盘的高度 ， 然后把输入框这个view的bottom样式 ， 设置成你获取的高度 ， 就完美的贴在输入框上方 。当输入框失去焦点时 ， 高度设置成0 ， 输入框view又回到了页面的底部 。
异步请求回调 + Token验证为了避免在业务中书写繁杂的if else语句嵌套 ， 或者回调函数
// 方法一onLoad:function (e) {// if嵌套if(){if(){if(){ // do something }}}// 回调陷阱func1(data,func(){func2(data,func(){func3(data,func(){// do something})})})},我的做法是 ， 为方法添加promise ， 举个例子：
公共功能js文件/** * 统一post请求接口 * @param {*} e “url,data,contentType,noOuth” */function post(e){// token 保存在缓存中 ， 有需要时调取let header = { 'Content-Type': contentType, 'Authorization':'Bearer ' + getCache('accessToken') }// 封装在promise中return new Promise(function (resolve, reject) {wx.request({url:config.domain + e.url , // domain统一放在config中data:e.data,method: 'POST',header: header,success: res => {// console.log(res)if(res.data.code == 200 ){resolve(res.data)// 请求成功 ， 返回数据}else{wx.showToast({title: res.msg,icon: 'none',duration: 1500,});reject(res.data.msg)// 请求出错 ， 显示错误}},fail: res => {// 请求失败wx.showToast({title:'请求发送失败',icon: 'none',duration: 1500,});}})})}


推荐阅读


上一篇：苏洵名二子 苏洵有几个儿子分别叫什么

下一篇：MySQL复杂where条件分析