微信小程序custom-tab-bar

最新推荐文章于 2024-11-25 13:06:14 发布

pmsyn

最新推荐文章于 2024-11-25 13:06:14 发布

阅读量3.8k

点赞数 4

文章标签：微信小程序小程序自定义 tab bar

本文链接：https://blog.csdn.net/rookiepm/article/details/131706481

版权

该文章介绍了如何在微信小程序中使用tdesign组件库的t-tab-bar来创建自定义tab-bar。首先，在项目中创建custom-tab-bar文件夹和index组件，然后在index.wxml和index.js中添加相应的代码以绑定数据和事件处理。接着，在app.json中配置tabBar和使用组件。最后，在页面onShow方法中调用初始化函数。这样实现了tab-bar的切换功能并自定义了样式。

摘要由CSDN通过智能技术生成

微信小程序自定义tab-bar。
tab-bar使用tdesign中的t-tab-bar

1 在项目下新建custom-tab-bar文件夹，新建index 组件。

1.1 index.wxml中增加t-tab-bar

<t-tab-bar value="{{value}}"    bindchange="onChange" theme="tag" split="{{false}}">
  <t-tab-bar-item wx:for="{{list}}" wx:key="index"  value="{{item.value}}"   icon="{{item.icon}}">
    {{item.label}}
  </t-tab-bar-item>
</t-tab-bar>

1.2在index.js中增加以下代码

 
Component({
    data: {
      value: 0,  
      list: [
        {value:0, pagePath: 'pages/home/index', label: '首页', icon: 'home' },
        {value:1, pagePath: 'pages/person-center/index', label: '个人中心', icon: 'user' }
      ],
    },
  
    methods: {
        init(){
            const page = getCurrentPages().pop();
            let a=this.data.list.find(item=>item.pagePath === page.route)
            this.setData({
                value:a.value
            });
          },
      onChange(e) {
            this.setData({
                value: e.detail.value
            });
            wx.switchTab({
                url: '/' + this.data.list[e.detail.value].pagePath
              });           
        }
    },
  });

2在app.json中配置tab

"tabBar": {
        "selectedColor": "#33a3dc",
        "backgroundColor": "#ffffff",
        "color": "#000000",
        "custom": true,
        "list": [
            {
                "text": "首页",
                "pagePath": "pages/home/index"
            },
            {
                "text": "个人中心",
                "pagePath": "pages/person-center/index"
            }
        ]
    },
    "usingComponents": {
        "t-tab-bar": "tdesign-miniprogram/tab-bar/tab-bar",
        "t-tab-bar-item": "tdesign-miniprogram/tab-bar-item/tab-bar-item"
	}

3.在pages/home/index.js和pages/person-center/index.js中加入如下代码

onShow() {
        this.getTabBar().init();
    },

编译后即可实现自定义tab-bar。