uni-app 开发微信小程序自定义tabBar

最新推荐文章于 2025-10-08 00:10:38 发布

原创最新推荐文章于 2025-10-08 00:10:38 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #uni-app #微信小程序 #小程序 #javascript

前端开发同时被 2 个专栏收录

5 篇文章

订阅专栏

vue框架

5 篇文章

订阅专栏

本文详细介绍了如何在uni-app中配置并实现自定义tabBar，包括在pages.js中的设置和创建custom-tab-bar组件，以及在index.wxml和index.js中的实现。同时，讲解了如何处理页面加载时的缓存问题，确保tabBar选中状态的正确显示。涉及到的技术点包括微信小程序开发、uni-app的自定义组件和数据绑定。

pages.js 里面tabBar配置加上"custom": true

"tabBar": {
	"custom": true,
    "color": "#8a8a8a",
    "selectedColor": "#198cfb",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/basics.png",
        "selectedIconPath": "static/tabbar/basics_blue.png"
      },
      {
        "pagePath": "pages/UserCenter/index",
        "text": "我的",
        "iconPath": "static/tabbar/about.png",
        "selectedIconPath": "static/tabbar/about_blue.png"
      }
    ]
  }

然后在根目录下新增custom-tab-bar 因为uni-app 不会编译这个文件夹所以要建成微信小程序一样的

主要的两个文件index.wxml，index.js

<view class="tab-bar-wrapper">
	<view class="tab-bar">
		<view class="tab-box">
			<view class="tab-bar-item" wx:for="{{list}}" wx:key="index" class="tab-bar-item"
				data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
				<image src="{{selected === index ? item.selectedIconPath : item.iconPath}}" mode=""></image>
				<view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
			</view>
		</view>
	</view>
</view>

index.js

Component({
  data: {
    selected: 0,
    color: "#ffffff",
    selectedColor: "#f40918",
    list: [{
      "pagePath": "/pages/index/index",
      "text": "首页",
      "iconPath": "/static/tabbar/basics.png",
      "selectedIconPath": "/static/tabbar/basics_blue.png"
    },{
      "pagePath": "/pages/UserCenter/index",
      "text": "我的",
      "iconPath": "/static/tabbar/about.png",
      "selectedIconPath": "/static/tabbar/about_blue.png"
    }]
  },
	attached () {
		this.setData({
		  selected: 0
		})
	},
	observers: {
		"selected": function (newVal) {
			const index = wx.getStorageSync("tabBarIndex")
			if (newVal != index) {
				this.setData({
				  selected: index
				})
			}
		}
	},
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({ url })
			const index = wx.getStorageSync("tabBarIndex")
      this.setData({
        selected: index
      })
			wx.setStorageSync("tabBarIndex", data.index)
    }
  }
})

在pages/index/index里面的onLoad,onShow方法中 uni.setStorageSync("tabBarIndex", 0) 缓存对应的值

pages/UserCenter/index uni.setStorageSync("tabBarIndex", 1)

在main.js 中 uni.setStorageSync("tabBarIndex", 0) 这个是在页面初始化的时候将缓存值改为0 不然会显示上一次的缓存值

效果图