android微信底部导航栏微信底部导航栏设置

转载

技术笔耕者 2023-12-23 22:35:22

文章标签 android微信底部导航栏底部导航 ico 自定义 文章分类 Android 移动开发

先看一下自定义底部导航（图1）和未自定义的导航（图2）效果差距

android微信底部导航栏微信底部导航栏设置_ico

图1

android微信底部导航栏微信底部导航栏设置_android微信底部导航栏_02

图2

如何实现自定义底部导航

需要在app.json 的配置项"tabBar"中添加 "custom":true,添加了这个属性之后，下面的list配置项将失效
所以如果自定义底部导航栏的话是不需要在app.json中配置list的。
创建一个与pages同级的文件夹，名称为custom-tab-bar文件夹名字是规定好的只能叫做这个。
创建好这个文件夹之后就是编写底部导航的内容

custom-tab-bar/index.js

点击查看代码

Component({
    properties: {

    },
    data: {
        list: [{
            "pagePath": "pages/index/index",
            "text": "首页",
            "iconPath": "images/index.png",
            "selectedIconPath": "images/index-select.png"
          },
          {
            "pagePath": "pages/page1/index",
            "text": "导航1",
            "iconPath": "images/alumus.png",
            "selectedIconPath": "images/alumus-select.png"
          },
          {
            "pagePath": "pages/page2/index",
            "text": "导航2",
            "iconPath": "images/alumus.png",
            "selectedIconPath": "images/alumus-select.png"
          },
          {
            "pagePath": "pages/page3/index",
            "text": "导航3",
            "iconPath": "images/alumus.png",
            "selectedIconPath": "images/alumus-select.png"
          },
          {
            "pagePath": "pages/page4/index",
            "text": "导航4",
            "iconPath": "images/alumus.png",
            "selectedIconPath": "images/alumus-select.png"
          }],
        currentindex: 0
    },
    methods: {
        switchTab(e) {
            let url = '/' + e.currentTarget.dataset.path
            this.setData({
                currentindex: e.currentTarget.dataset.index
            })
            
            wx.switchTab({
                url: url,
            })
        }
    }
})

custom-tab-bar/index.json 点击查看代码

{
    "usingComponents": {},
    "navigationBarTitleText": "",
    "navigationBarBackgroundColor": "#4576c9",
    "navigationBarTextStyle": "white"
  }

custom-tab-bar/index.wxml 点击查看代码

<view class="tabar">
    <view wx:for="{{list}}" wx:key="index"  class="item"  data-index="{{index}}" data-path="{{item.pagePath}}" bindtap="switchTab">
      <image  class="image" src="{{currentindex==index?('../'+item.selectedIconPath):('../'+item.iconPath)}}"></image>
        <view class="{{currentindex==index?'color':''}}">{{item.text}}</view>
    </view>
</view>

custom-tab-bar/index.wxss 点击查看代码

.tabar {
    height: 140rpx;
    width: 100vw;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    border-top: 1px solid #f3f3f3;
}
.tabar .item {
    width: 20vw ;
    height: 140rpx;
    color: #bcbcbc;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    background-color: white;
    
}
.tabar .item  .image {
    width: 60rpx;
    height: 60rpx;
}
.tabar .item .color {
    color: #4576c9;
}

4. 上一步将底部导航组件准备好后，接下来编辑代码实现点击切换页面的效果，在app.js中添加editTabBar函数

app.js

点击查看代码

App({
  onLaunch: function () {
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力');
    } else {
      wx.cloud.init({
        // env 参数说明：
        //   env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
        //   此处请填入环境 ID, 环境 ID 可打开云控制台查看
        //   如不填则使用默认环境（第一个创建的环境）
        // env: 'my-env-id',
        traceUser: true,
      });
    }

    this.globalData = {};
  },
  editTabBar: function () {
    //使用getCurrentPages可以获取当前加载中所有的页面对象的一个数组，数组最后一个就是当前页面。

    var curPageArr = getCurrentPages(); //获取加载的页面
    var curPage = curPageArr[curPageArr.length - 1]; //获取当前页面的对象
    var pagePath = curPage.route; //当前页面url
    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
    });
  }
});

5. 完成到上一步之后已经可以实现页面的切换效果了，但是页面切换了，但是底部导航的选中状态并没有实现对应的选中效果接下来需要在每个展示页面的onShow钩子函数中编写实现底部导航和页面对应的选中效果

android微信底部导航栏微信底部导航栏设置_底部导航_03