标签 uni-app 下的文章

uni-app的坑还是挺多的，这是今天遇到的一个坑，话不多说，上代码：

<view v-if="condition1"> 1 </view>
<template v-else-if="condition2">
    <view> 2 </view>
</template>

上面的代码中，template中的内容即使条件为 true，也可能在真机上不会显示出来。

解决的办法就是不要混用，如果确实要用到 template，那就全部用 template：

<template v-if="condition1">
    <view> 1 </view>
</template>
<template v-else-if="condition2">
    <view> 2 </view>
</template>

在 uni-app 中使用自定义 tabBar，需要注意的一共有 3 点：app.json的配置、custom-tab-bar目录的建立、tab 页中getTabBar方法的调用。

首先根据官方文档，配置app.json。在 uni-app 项目中，app.json对应的是pages.json，每个页面的.json文件，需要写在pages.json的pages-style段中：

{
    "tabBar": {
        "custom": true,
        "color": "#000000",
        "selectedColor": "#000000",
        "backgroundColor": "#000000",
        "list": [
            {
               "pagePath": "pages/index/index",
                "text": "首页"
            },
            {
                "pagePath": "pages/me/index",
                "text": "我的"
            }
        ]
    },
    "pages": [
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "首页",
                "usingComponents": {}
            }
        },
        {
            "path": "pages/me/index",
           "style": {
                "navigationBarTitleText": "我的",
                "usingComponents": {}
            }
        }
    ],
    ......
}

然后需要在根目录下新建custom-tab-bar目录，在这个目录中手动新建小程序四件套，即index.wxml、index.js、index.wxss、index.json。这个文件夹会被原封不动地复制到编译好的项目中。接着就是编写 tabBar 的样式和逻辑，这和原生开发是一样的，这里不再赘述。

最后需要在 tab 页面中调用getTabBar方法。uni-app 的页面是.vue文件。在onShow事件中，添加如下代码：
onShow() {
this.$mp.page.getTabBar().setData({
selectdIndex: 1
});
}
注意，getTabBar方法并不是直接在this上，而是在this.$mp.page上。

还有一点需要注意的是，tabBar 会占用一部分页面高度，tab 页最下方的内容会被遮住，需要处理一下这个问题，比如给 tab 页增加一个与 tabBar 高度一样的padding-bottom。