typescript编写微信小程序-自定义tab

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了typescript编写微信小程序-自定义tab，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1521字，纯文字阅读大概需要3分钟。

内容图文

配置

1. 配置 app.json, 随便创建几个页面

{
  "tabBar": {
    "custom": true,
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/test/index",
        "text": "test"
      },
      {
        "pagePath": "pages/tab/index",
        "text": "tab"
      }
    ]
  },
  ...
  "usingComponents": {
    "van-tabbar": "@vant/weapp/tabbar/index",
    "van-tabbar-item": "@vant/weapp/tabbar-item/index",
    "van-icon": "@vant/weapp/icon/index"
  }
}

tab组件

创建 custom-tab-bar 目录, 然后创建个组件

wxml

<van-tabbar active="{{ active }}" bind:change="onChange">
    <van-tabbar-item wx:for="{{ list }}" wx:key="index" icon="{{ item.icon }}">
        {{ item.text }}
    </van-tabbar-item>
</van-tabbar>

index.ts

Component({
    data: {
        active: 0,
        list: [
            {
                "url": "/pages/index/index",
                "icon": "wap-home-o",
                "text": "首页"
            },
            {
                "url": "/pages/test/index",
                "icon": "cluster-o",
                "text": "test"
            },
            {
                "url": "/pages/tab/index",
                "icon": "setting-o",
                "text": "tab"
            },
        ]
    },
    methods: {
        onChange(e) {
            this.setData({active: e.detail});
            wx.switchTab({
                url: this.data.list[e.detail].url
            });
        },
        init() {
            const page = getCurrentPages().pop();
            this.setData({
                // @ts-ignore
                active: this.data.list.findIndex(item => item.url === `/${page.route}`)
            });
        }
    }
});

• active 标识当前激活的组件
• list 中的url必须和配置文件中的一样
• onChange 函数 点击时切换url
• init 函数 在页面中调用,改变激活的 active

页面

在页面的 onShow 生命周期调用 tab 组件的 init 方法

Page({
  onShow: function () {
    this.getTabBar().init();
  },
})

源码: https://github.com/NikolasSky/ts-miniprogram/tree/master/ts-miniprogram-tab

内容总结

以上是互联网集市为您收集整理的typescript编写微信小程序-自定义tab全部内容，希望文章能够帮你解决typescript编写微信小程序-自定义tab所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---