微信小程序自定义底部导航栏

微信小程序自定义底部导航栏

为了完成老师交给的任务，需要完成如下图所示的自定义底部导航栏。

1. .js文件

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: {
    tabs_block: {
      type: null,
      value: [{
          text: '首页',
          style: 1,
          icon: './images/index.png',
          iconed: './images/index1.png',
          fn: 'gotoIndex'
        },
        {
          text: '发现',
          style: 0,
          icon: './images/find.png',
          iconed: './images/find1.png',
          fn: 'gotoFind'
        },
        {
          text: '',
          style: 3,
          icon: '',
          fn: 'gotoScan'
        },
        {
          text: '圈子',
          style: 0,
          icon: './images/friend.png',
          iconed: './images/friend1.png',
          fn: 'gotoFriends'
        },
        {
          text: '我的',
          style: 0,
          icon: './images/my.png',
          iconed: './images/my1.png',
          fn: 'gotoMy'
        }
      ],
    },
    activeIndex: {
      type: Number,
      value: 0,
      observer: function(newVal, oldVal) {}
    }
  },

  methods: {
    tabClick: function(e) {
      this.setData({
        activeIndex: e.currentTarget.id,
      });
      if (e.currentTarget.id == 2){
        wx.scanCode({
          success(res) {
            console.log(res)
            wx.navigateTo({
              url: '/pages/scansuccess/scansuccess?result=' + res.result
            })
          }
        })
      }
    }
  }
})

2. .json文件

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

3. .wxml文件

  
  
  
  
  








  
    
      
        
          
            
          
        

        
          
            
          
        

        {{item.text}}

        
            
        
      
    
  

4. .wxss文件

/* 这里的样式只应用于这个自定义组件 */
/**
* 选项卡css
*/
.navigation_bar{
  padding-top: 16rpx;
  bottom: 0;
  position: fixed;
  /* left: 50rpx; */
  background: #E1DDD2;

}
.navbar{
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  width: 750rpx;
  height: 100rpx;
  /* border-bottom: 1rpx #b8b8b8 solid; */
}
.navbar__item{
  text-align: center;
  color: #7F7B72;
  font-size: 24rpx;
  width: 20%;
  height: 100rpx;
  line-height: 36rpx;
  /* border: 1rpx #000 solid; */
}
.nav_scan{
  width: 200rpx;
  height: 200rpx;
  background: #E1DDD2;
  position: fixed;
  bottom: -50rpx;
  border-radius: 50%;
  left: 275rpx;
  box-shadow:0 0 10rpx rgba(183, 166, 119, 0.589);
}
.bar_item_on{
  color: #B7A677;
}
.navbar__imgs{
  margin: 0 auto;
  width: 62rpx;
  height: 62rpx;
}
.navbar__img{
  width: 100%;
  height: 100%;
}
.navbar__img_3{
  width: 100rpx;
  height: 100rpx;
  position: relative;
  top : -84rpx;
  
}
.nav_shadow{
  position: fixed;
  bottom: 0;
  width: 750rpx;
  height: 115rpx;
  background: red;
  box-shadow:0 0 10rpx rgba(183, 166, 119, 0.39);
}

5. 自定义组件在需要的页面配置

{
  "usingComponents": {
    "my-component": "/resource/self/self"
  }
}

6. 自定义组件的使用

  
    首页
  
  
    发现
  
  
    扫一扫
  
  
    圈子
  
  
    我的
  

7. 运行结果图