Taro+NutUI+Vue3+TypeScript自定义Tabbar

啦啦朵朵

已于 2022-11-28 19:19:44 修改

阅读量2.2k

点赞数

文章标签： typescript taro javascript

于 2022-11-28 19:18:22 首次发布

本文链接：https://blog.csdn.net/qq_34111842/article/details/128085369

版权

本文介绍了如何使用Taro、NutUI、Vue3和TypeScript来创建自定义Tabbar。首先，在src/components下创建custom-tab-bar文件夹，包含customTabBar.vue和customTabBar.scss文件。然后在需要的页面如index.vue中，通过current属性控制当前页面索引。最后，运行npm run dev:weapp在微信开发者工具预览效果。

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

app.config.ts：

export default {
  pages: [
    'pages/index/index',
    'pages/hall/index/index',
    'pages/shops/index/index',
    'pages/user/index/index'
  ],
  window: {
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#34C266',
    navigationBarTitleText: 'WeChat',
    navigationBarTextStyle: 'white'
  },
  tabBar: {
    custom:true,
    color: "#B1B1B1",
    selectedColor: "#34C266",
    backgroundColor: "#F8F8F8",
    list: [
      {
        pagePath: "pages/index/index",
        text: "首页",
        iconPath: "assets/icons/ic_home.png",
        selectedIconPath: "assets/icons/ic_home_active.png",
      },
      {
        pagePath: "pages/hall/index/index",
        text: "供需大厅",
        iconPath: "assets/icons/ic_hall.png",
        selectedIconPath: "assets/ico