微信小程序开发之底部导航栏和自定义底部导航栏-蒲公英云

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

一、底部导航栏

第一步，打开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中使用组件，并设计底部导航栏

<!--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>
<!--index.wxss-->
.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;
}
<!--index.js-->
Page({
  data: {
    pageCur: 'spring',
  },
  navChange(e) {
    this.setData({
      pageCur: e.currentTarget.dataset.cur
    })
  }
})