微信小程序custom-tab-bar

微信小程序自定义tab-bar。

tab-bar使用tdesign中的t-tab-bar

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

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

wxml 复制代码
<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中增加以下代码

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

json 复制代码
"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中加入如下代码

js 复制代码
onShow() {
        this.getTabBar().init();
    },

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

相关推荐
老华带你飞2 小时前
畅阅读小程序|畅阅读系统|基于java的畅阅读系统小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·小程序·毕设·畅阅读系统小程序
老华带你飞9 小时前
租房平台|租房管理平台小程序系统|基于java的租房系统 设计与实现(源码+数据库+文档)
java·数据库·小程序·vue·论文·毕设·租房系统管理平台
项目題供诗10 小时前
微信小程序开发教程(八)
微信小程序·小程序
00后程序员张17 小时前
iOS App 混淆与资源保护:iOS配置文件加密、ipa文件安全、代码与多媒体资源防护全流程指南
android·安全·ios·小程序·uni-app·cocoa·iphone
低代码布道师17 小时前
少儿舞蹈小程序(12)作品列表查询搭建
低代码·小程序
编程迪18 小时前
基于Java+Vue开发的家政服务系统源码适配H5小程序APP
小程序·家政小程序·家政系统源码·家政系统·家政源码
拼图20920 小时前
微信小程序——云函数【使用使用注意事项】
微信小程序·小程序
fakaifa1 天前
【独立版】智创云享知识付费小程序 v5.0.23+小程序 搭建教程
小程序·uni-app·知识付费·源码下载·智创云享独立版
2501_916007471 天前
Transporter App 使用全流程详解:iOS 应用 ipa 上传工具、 uni-app 应用发布指南
android·ios·小程序·https·uni-app·iphone·webview
fakaifa1 天前
CRMEB多门店 v3.3源码 无授权限制+PC端+uniapp前端
小程序·uni-app·商城小程序·技术教程·源码下载·crmeb多门店