微信小程序自定义tabbar(不使用原生tabbar)

假如想完全自定义微信小程序的tabbar,实现如下效果:

在这里插入图片描述
实现步骤:

a.创建一个tabbar组件

// .wxml文件
<view class="tabbar">
  <navigator wx:for="{{tabbarList}}" wx:key="txt" url="{{item.url}}" class="tabbar-item" open-type="switchTab" hover-class="nav-hover">
    <image wx:if="{{index === 2}}" class="img" src="/images/{{item.img}}"></image>
    <image wx:else class="image" src="/images/{{activateIndex == index?item.selectedImg:item.img}}"></image>
    <text class="txt">{{item.txt}}</text>
  </navigator>
</view>

// .js文件
Component({
  properties: {
    activateIndex: {
      type: Number,
      value: 0,
    },
  },
  data: {
    tabbarList: [
      {
        txt: '首页',
        url: '/pages/homePage/homePage',
        img: 'home_icon_default.png',
        selectedImg: 'home_icon_activate.png'
      },
      {
        txt: '素材',
        url: '/pages/libary/libary',
        img: 'classification_icon_default.png',
        selectedImg: 'classification_icon_activate.png'
      },
      {
        txt: '',
        url: '/pages/read/read',
        img: 'home_icon_reading.png',
        selectedImg: 'home_icon_activate.png'
      },
      {
        txt: '活动',
        url: '/pages/activity/activity',
        img: 'activities_icon_default.png',
        selectedImg: 'activities_icon_activate.png'
      },
      {
        txt: '我的',
        url: '/pages/my/my',
        img: 'mine_icon_default.png',
        selectedImg: 'mine_icon_activate.png'
      },
    ],
  },
  methods: {
  }
})
  
// .wxss文件
.tabbar {
  height: 114rpx;
  width: 100%;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow:0 2px 13px 0px rgba(153,153,153,0.2);
  z-index: 10000;
}
.tabbar-item {
  flex: 1;
  text-align: center;
  font-size: 20rpx;
  color: #999;
}
.image {
  width: 42rpx;
  height: 42rpx;
}
.txt {
  text-align: center;
  display: block;
}
.img {
  width: 110rpx;
  height: 110rpx;
  border-radius: 55rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 75rpx;
}
.nav-hover {
  background-color: none;
}

这里需要说明的一点,组件如何实现当前选中的效果:
在.js文件中添加了一个activateIndex属性,此属性是需要从父组件中传值过来的,用来代表父组件的索引状态值;
在.wxml中 <image wx:else class=“image” src="/images/{{activateIndex == index?item.selectedImg:item.img}}"> 在循环体中,如果从父组件传过来的activateIndex值为循环中的index值,则src属性指向了选中的图标,否则指向未选中的图标,这样就实现了当前页图标高亮选中的效果了

b.在父组件中引用组件
tabbar组件中已经定义好了需要跳转的几个页面路径,以homPage页面为例来说明:
在homePage.wxml中写入 <tabbar activateIndex="{{0}}" /> 即可, 因为首页是tabbar的第一个内容,所以索引为0

c.配置app.json文件
设置app.json文件是为了达到和原生tabbar的一样的页面缓存效果
list属性设置为在组件中定义的页面路径
backgroundColor属性最好设置成"transparent"透明效果

"tabBar": {
    "color": "white",
    "borderStyle": "white",
    "backgroundColor": "transparent",
    "list": [
      {
        "pagePath": "pages/homePage/homePage"
      },
      {
        "pagePath": "pages/libary/libary"
      },
      {
        "pagePath": "pages/read/read"
      },
      {
        "pagePath": "pages/activity/activity"
      },
      {
        "pagePath": "pages/my/my"
      }
    ]
  }
}

d.配置app.js
在onLaunch中,需要隐藏一下原生tabbar,否则会出现双下巴
使用 wx.hideTabBar() 进行隐藏

关于此种方式创建tabbar的一些缺点
一个显而易见的问题就是第一次点击tabbar里面的内容的时候页面会闪烁;
还有一个问题就是:刚进入小程序页面的时候,原生的tabbar会一闪而过,然后消失,好像并不能一开始就完全隐藏掉;
如果你们有好的方法来解决这两个问题,请告诉我哦~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值