tabBar 自定义,小程序自定义底部导航栏

创建一个自定义组件 my_tab,组件代码在后面,先看调用自定义组件的代码,比如我需要在index 页面调用,就在index.json中引用组件,index.json 代码(引用的路径为你创建的自定义组件路径)

{
  "navigationStyle": "custom",
  "usingComponents": {
    "my_tab": "../Component/my_tab"
  }
}

我的组件目录如下:

然后在index.wxml 中使用组件就可以

<my_tab></my_tab>

效果图:

 

下面是组件代码:

组件JS代码

// my-picker.js
Component({
  /**
   * 组件的属性列表
   */
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
      this.setData({
        idx:wx.getStorageSync('myTab')||1
      })
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  data: {
    idx:wx.getStorageSync('myTab')||1
  },
  /**
   * 组件的方法列表
   */
  methods: {
    navPage: function (e) {
      let id = e.currentTarget.id;
      if(id==wx.getStorageSync('myTab'))return

      wx.setStorageSync('myTab', id)
      if(id==1){
        wx.reLaunch({
          url: '/pages/chatList/chatList',
        })
      }else if(id==2){
        wx.reLaunch({
          url: '/pages/mailList/mailList',
        })
      }else if(id==3){
        wx.reLaunch({
          url: '/pages/find/find',
        })
      }else if(id==4){
        wx.reLaunch({
          url: '/pages/user/user',
        })
      }
    },
  }
})

my_tab.json

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

my_tab.wxml

<!--pages/my_tab.wxml-->
<view class="my_tab">
	<view catchtap="navPage" style="color:{{idx==1?'#13D36A':''}}" id="1">聊天</view>
	<view catchtap="navPage" style="color:{{idx==2?'#13D36A':''}}" id="2">通讯录</view>
	<view catchtap="navPage" style="color:{{idx==3?'#13D36A':''}}" id="3">发现</view>
	<view catchtap="navPage" style="color:{{idx==4?'#13D36A':''}}" id="4">我</view>
</view>

my_tab.wxss

/* pages/my_tab.wxss */
.my_tab {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 110rpx;
  line-height: 110rpx;
  display: flex;
  flex-direction: row;
  background-color: #F7F7F7;
  border-top: 1px solid #d0d0d0;
}

.my_tab view {
  flex: 1;
  text-align: center;
}

 

相关推荐
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页
实付 49.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值