[移动开发]小程序实现自定义底部导航栏-横竖双列切换

?小程序实现自定义底部导航栏

很多时候，微信原生的底部导航栏不能满足我们的开发需求，因此封装一个适合自己的底部导航栏组件十分重要。

如何自己封装？ 我们可以利用 navigator 组件 来实现。

效果图 横竖双列

可动态设置：

导航栏背景、文字大小、文字选中颜色、文字本身颜色、导航栏动态渲染、图标和文字竖排和横排切换

组件属性

/**
   * 组件的属性列表
   */
  properties: {
    // 导航栏背景颜色
    backgrounds: {
      backgrounds: String,//类型
      value: '#fbfbfb'//默认值
    },
    // 文字原生颜色
    color: {
      color: String,
      value: 'black'
    },
    // 文字选中样式
    selectedColor: {
      selectedColor: String,
      value: '#22a6b3'
    },
    // 文字大小默认为28rpx 单位为rpx
    fontSize: {
      fontSize: String,
      value: '28'
    },
    // 选中的下标
    selected: {
      selected: Number,
      value: 0
    },
    // 默认0 图标和文字并行 1 文字在图标下面
    type: {
      selected: Number,
      value: 0
    },
     // 若想要动态设置底部导航栏，则将下面代码解除注释
     // navList: {
     //   navList: Array,
     //   value: [] , //  初始化底部导航栏
     // }
  },

默认初始值

navList 是对底部导航栏的初始化

/**
   * 组件的初始数据
   */
  data: {
    navList: [{
      "pagePath": "/pages/main/index",
      "text": "拼车",
      "iconPath": "/icons/car.png",
      "selectedIconPath": "/icons/car_click.png"
    },
    {
      "pagePath": "/pages/search/index",
      "text": "搜索",
      "iconPath": "/icons/search.png",
      "selectedIconPath": "/icons/search_click.png"
    },
    {
      "pagePath": "/pages/order/index",
      "text": "订单",
      "iconPath": "/icons/order.png",
      "selectedIconPath": "/icons/order_click.png"
    },
    {
      "pagePath": "/pages/my/index",
      "text": "个人中心",
      "iconPath": "/icons/my.png",
      "selectedIconPath": "/icons/my-click.png"
    }
   ],
  },

与此对应的是：app.json里面 需要 将 tabBar 的 custom属性设置为 true

"tabBar": {
    "custom": true,
    "color": "#999",
    "selectedColor": "#22a6b3",
    "backgroundColor": "#f3fbfb",
    "position": "bottom",
    "borderStyle": "black",
    "list": [{
      "pagePath": "pages/main/index",
      "text": "拼车",
      "iconPath": "./icons/car.png",
      "selectedIconPath": "./icons/car_click.png"
    },
    {
      "pagePath": "pages/search/index",
      "text": "搜索",
      "iconPath": "./icons/search.png",
      "selectedIconPath": "./icons/search_click.png"
    },
    {
      "pagePath": "pages/order/index",
      "text": "订单",
      "iconPath": "./icons/order.png",
      "selectedIconPath": "./icons/order_click.png"
    },
    {
      "pagePath": "pages/my/index",
      "text": "个人中心",
      "iconPath": "./icons/my.png",
      "selectedIconPath": "./icons/my-click.png"
    }
   ]
  },

编写 组件 wxml

<!--components/menuBtn/menuBtn.wxml-->
<view class="tabs enHigh" style=" background: {{ backgrounds }}; color: {{color}}; " >
  <view class="meunBtn" style="font-size: {{fontSize}}rpx;" wx:for="{{navList}}" wx:key="index">
    <navigator url="{{item.pagePath}}" class="nav {{type == 1 ? 'column' : ''}}" open-type="switchTab" hover-class="none">
      <view class="left">
        <image src="{{selected == index ? item.selectedIconPath : item.iconPath}}"></image>
      </view>
      <view style="color: {{selected == index ? selectedColor : color}};{{ type == 1 ? 'margin-top:2rpx' : 'margin-left: 4rpx;'}}">{{item.text}}</view>
    </navigator>
  </view>
</view>

使用组件

在xxx.json中

{
  "usingComponents": {
    "menuBtn": "/components/menuBtn/menuBtn"
  }
}

xxx.wxml

<menuBtn selected="0"></menuBtn>

源码下载

demo演示: 该仓库将不定期更新其他组件~

github

gittee