小程序自定义底部菜单栏

问题：小程序的底部菜单栏基本的样式根本不能满足我们的审美要求，所以我们可以通过自己来自定义一套小程序底部栏，可以设置透明背景哟，想要什么样式都可以自己定义，好了，废话不多说，直接上代码！

首先在和pages同一级建录建立tabbar.xml,如右截图所示
具体的tabbar.xml代码如下所示：下面是讲这个代码封装成了一个模板，好处大家都知道，就是方便多处使用

<template name="tabBar">

  <view class="tab-bar" style="color: {{tabBar.color}}; background: {{tarBar.backgroundColor}}; {{tabBar.position=='top'? 'top: 0' : 'bottom: 0'}}; {{tabBar.borderStyle? (tabBar.position=='top'? 'border-bottom: solid 1px '+tabBar.borderStyle + ';' : 'border-top: solid 1px '+tabBar.borderStyle + ';') : ''}}">

    <block wx:for="{{tabBar.list}}" wx:key="pagePath">

      <navigator url="{{item.pagePath}}" open-type="redirect" class="{{item.clas}}" style="{{item.active? 'color: '+(item.selectedColor? item.selectedColor : tabBar.selectedColor) : ''}}">

        <image src="{{item.selectedIconPath}}" wx:if="{{item.active}}" class="img"></image>

        <image src="{{item.iconPath}}"  wx:if="{{!item.active}}" class="img"></image>
        
      

        <text>{{item.text}}</text>
       
      </navigator>

    </block>

    <view class="clear"></view>

  </view>

</template>

3.接下来就是app.wxss中写样式了，具体代码如下所示：

/**app.wxss**/

.container {
  width: 100%rpx;
  height: 100%rpx;
  font-size: 32rpx;
}


.menu-item {
  width: 24%;
  float: left;
  border-right: 1px solid rgb(200, 200, 200);
  text-align: center;
  padding-top: 8px;
}
.menu-item2{
  border-right:none;
}

.img {
  width: 23px;
  height: 23px;
  display: block;
  margin: auto;
}

.clear {
  clear: both;
}

.tab-bar {
  background-color:rgb(243, 243, 243);
  opacity: .8;
  position: fixed;
  width: 100%;
  /* padding: 0px 2%; */
}

4. 就是在app.js中写js动态样式了，从36行开始到最后一行

//app.js
App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null
  },
  editTabBar: function () {

    var _curPageArr = getCurrentPages();

    var _curPage = _curPageArr[_curPageArr.length - 1];

    var _pagePath = _curPage.__route__;

    if (_pagePath.indexOf('/') != 0) {

      _pagePath = '/' + _pagePath;

    }

    var tabBar = this.globalData.tabBar;

    for (var i = 0; i < tabBar.list.length; i++) {

      tabBar.list[i].active = false;

      if (tabBar.list[i].pagePath == _pagePath) {

        tabBar.list[i].active = true;//根据页面地址设置当前页面状态

      }

    }

    _curPage.setData({

      tabBar: tabBar

    });

  },

  globalData: {

    userInfo: null,

    tabBar: {

      color: "#a9b7b7",

      selectedColor: "#ff8124",

      borderStyle: "white",

      list: [
        {
          selectedIconPath: "/pages/image/1-1.png",

          iconPath: "/pages/image/1.png",

          pagePath: "/pages/index/index",

          text: "首页",

          clas: "menu-item",

          selected: false,

        },

        {

          selectedIconPath: "/pages/image/2-1.png",

          iconPath: "/pages/image/2.png",

          pagePath: "/pages/collect/collect",

          text: "收藏",

          clas: "menu-item",

          selected: false

        },

        {

          selectedIconPath: "/pages/image/3-1.png",

          iconPath: "/pages/image/3.png",

          pagePath: "/pages/disses/disses",

          text: "需求填写",

          clas: "menu-item",

          selected: false

        },

        {

          selectedIconPath: "/pages/image/4-1.png",

          iconPath: "/pages/image/4.png",

          pagePath: "/pages/index/index",

          text: "房屋管理",

          clas: "menu-item menu-item2",

          selected: false

        }

      ],

      position: "bottom"

    }

  }
})

5. 最后就是引用这个定义好的模板了，代码如下：

5.1首先带在js中页面正在加载的时候就显示出来，代码就是下面的onload执行的代码

//index.js
//获取应用实例
const app = getApp()

Page({
  onLoad: function (options) {
    app.editTabBar();

  }
})

5.2然后就是collection.wxml中的引用模板就可以了

<!--index.wxml-->
<view class="container">

  <import src="../../tabbar.wxml" />
  <template is="tabBar" data="{{tabBar}}" />

</view>

以上代码仅供参考！

小程序自定义底部菜单栏

猜你喜欢