微信小程序自定义tabbar组件（用于和微信自带tabbar外其他界面）

最新推荐文章于 2025-03-31 11:14:45 发布

丶枕边人

最新推荐文章于 2025-03-31 11:14:45 发布

阅读量1.7k

点赞数 2

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.youkuaiyun.com/nan961136007/article/details/103921162

版权

这篇博客介绍了如何在微信小程序中创建一个自定义tabbar组件，避免与微信自带的tabbar冲突。文章详细讲解了各个步骤，包括创建template文件、编写wxml、wxss和js代码，并给出了在其他页面引用组件的注意事项，如避免在主页面引用以防止样式冲突。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前面把两个自定义花式的写了，哈哈，现在来写个简单的，注意哦：app.json里用了自带tabbar的那几个主页面不要引用，不然也要在app.js里去隐藏哦。

哦，对了，有个坏处就是，tabbar会闪，不过你们看着要求来呗。

这是微信自带的，记得也用上哦，后面需要显示出这个tabbar的话在引用模板
在这里插入图片描述

我的模板文件叫template
首先是template.wxml


<view class='footer'>
  <view class='footer_list' data-id='{
  {index}}' wx:for="{
  {listInfo}}" data-current="{
  {index}}" wx:key="this" bindtap="chooseImg">
    <image class="footer-image" hidden='{
  {curIdx===index}}' src="{
  {item.imgUrl}}"></image>
    <image class="footer-image" hidden='{
  {curIdx!==index}}' src="{
  {item.curUrl}}"></image>
    <view class="footer-text">{
  {item.text}}</view>
  </view>
</view>

接着是template.wxss代码

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 95rpx; /*footer的高度*/
  background: #fff;
  z-index: 500;
  border-top: 1rpx solid #e9e9e9;
  display: flex;
  flex-direction: row;
}

.footer_list {
  width: 17%;
  height: 100%

最低0.47元/天解锁文章