微信小程序开发之底部导航栏和自定义底部导航栏

ゞ浴缸里的玫瑰 2022-11-28 13:20 346阅读 0赞

一、底部导航栏

第一步，打开app.json，在pages属性中添加底部tab页

"pages":[
        "pages/index/index",
        "pages/user/user"
     ]

第二步，添加tabBar属性进行配置

"tabBar": {
        "color": "#000000",  //tab 上的文字默认颜色，仅支持十六进制颜色
        "selectedColor": "#00BFFF", //tab 上的文字选中时的颜色，仅支持十六进制颜色
        "backgroundColor": "#FFFFFF",  //tab 的背景色，仅支持十六进制颜色
        "borderStyle": "black",  //tabbar 上边框的颜色， 仅支持 black / white
        "position": "bottom",  //tabBar 的位置，仅支持 bottom / top
        "custom": false,  //自定义tabBar
        "list": [  //tab 的列表，最少 2 个、最多 5 个 tab
          {
            "pagePath": "pages/index/index",  //页面路径，必须在 pages 中先定义
            "text": "首页",  //tab 上按钮文字
            "iconPath": "static/img/index.png",  //图片路径，不支持网络图片，当 position 为 top 时，不显示 icon
            "selectedIconPath": "/static/img/selectedIndex.png"  //选中时的图片路径，不支持网络图片，当 position 为 top 时，不显示 icon
          },
          {
            "pagePath": "pages/user/user",
            "text": "个人中心",
            "iconPath": "static/img/user.png",
            "selectedIconPath": "/static/img/selectedUser.png"
          }
        ]
    }

效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmRkeV94_size_16_color_FFFFFF_t_70][]

二、自定义底部导航栏

第一步，打开app.json，在pages属性中添加一个首页和四个tab页

"pages":[
        "pages/index/index",
        "pages/spring/spring",
        "pages/summer/summer",
        "pages/autumn/autumn",
        "pages/winter/winter"
     ]

第二步，打开tab页的json文件，将四个tab页声明为组件

{
      "component": true,
      "usingComponents": {}
    }

第三步，打开tab页的wxml文件，添加页面内容

第四步，在index.json中引用自定义组件

"usingComponents": {
        "spring": "/pages/spring/spring",
        "summer": "/pages/summer/summer",
        "autumn": "/pages/autumn/autumn",
        "winter": "/pages/winter/winter"
    }

第五步，在index.wxml中使用组件，并设计底部导航栏

<spring wx:if="{
       {pageCur == 'spring'}}"></spring>
    <summer wx:if="{
       {pageCur == 'summer'}}"></summer>
    <autumn wx:if="{
       {pageCur == 'autumn'}}"></autumn>
    <winter wx:if="{
       {pageCur == 'winter'}}"></winter>
    <view class="fu-bar shadow foot">
    	<view class="cell" bindtap="navChange" data-cur="spring">
    		<view class="image">
    			<image src="/static/img/spring{
       {pageCur == 'spring' ? '_cur' : ''}}.png"></image>
    		</view>
        <view class="{
       {pageCur == 'spring' ? 'text-blue' : 'text-gray'}}">春</view>
    	</view>
      <view class="cell" bindtap="navChange" data-cur="summer">
    		<view class="image">
    			<image src="/static/img/summer{
       {pageCur == 'summer' ? '_cur' : ''}}.png"></image>
    		</view>
        <view class="{
       {pageCur == 'summer' ? 'text-blue' : 'text-gray'}}">夏</view>
    	</view>
      <view class="cell" bindtap="navChange" data-cur="autumn">
    		<view class="image">
    			<image src="/static/img/autumn{
       {pageCur == 'autumn' ? '_cur' : ''}}.png"></image>
    		</view>
        <view class="{
       {pageCur == 'autumn' ? 'text-blue' : 'text-gray'}}">秋</view>
    	</view>
      <view class="cell" bindtap="navChange" data-cur="winter">
    		<view class="image">
    			<image src="/static/img/winter{
       {pageCur == 'winter' ? '_cur' : ''}}.png"></image>
    		</view>
        <view class="{
       {pageCur == 'winter' ? 'text-blue' : 'text-gray'}}">冬</view>
    	</view>
    </view>

.fu-bar {
      display: flex;
      min-height: 100rpx;
      justify-content: space-between;
      align-items: center;
    }
    
    .fu-bar.shadow {
      box-shadow: 0 -1rpx 6rpx rgba(0, 0, 0, 0.1);
    }
    
    .fu-bar.foot {
      position: fixed;
      bottom: 0;
      width: 100%;
      z-index: 1024;
    }
    
    .fu-bar .cell {
      display: flex;
      flex-direction: column;
      max-width: 100%;
      height: 100rpx;
      flex: 1;
    }
    
    .fu-bar .cell .image {
      margin: 0 auto;
    }
    
    .fu-bar .cell .image image {
      width: 50rpx;
      height: 50rpx;
    }
    
    .fu-bar .cell view[class*="text-"] {
      text-align: center;
      font-size: 22rpx;
    }

Page({
      data: {
        pageCur: 'spring',
      },
    
      navChange(e) {
        this.setData({
          pageCur: e.currentTarget.dataset.cur
        })
      }
    })

### **完成后的效果图如下** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmRkeV94_size_16_color_FFFFFF_t_70 1][]

## ##

### **以上图标均出自[iconfont][] ** ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmRkeV94_size_16_color_FFFFFF_t_70]: /images/20221124/bf02e5c2c8944862b0ba15cd5f09a02f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmRkeV94_size_16_color_FFFFFF_t_70 1]: /images/20221124/3d97ce9a215f410498e7d71b166f042b.png
[iconfont]: https://www.iconfont.cn/