微信小程序切换如何实现？

Question

tarBar使用position属性设置top可以实现这种效果。
我的项目中还有一处也是这种状态。
这种页面的切换如何实现？

Answer 1

1.http://www.jb51.net/article/1...
2.https://zhuanlan.zhihu.com/p/...
目前tarbar只能在app.json不能在组件内使用。

Answer 2

我也是刚尝试做小程序不久，可能有更适合的办法不一定~
tabBar只能实现一级的标签切换，二级的好像并不能在对应页面的json里添加tabBar标签，于是只好自己实现……
wxml文件

<view class="tab-container">
    <view id='tab0' class="tab-items {{activeTab == 0 ? 'active-tab' : ''}}" bindTap='switchTab'>
        <text>智能填单</text>
    </view>
    <view id='tab1' class="tab-items {{activeTab == 1 ? 'active-tab' : ''}}" bindTap='switchTab'>
        <text>填单记录</text>
    </view>
</view>

wxss文件

.tab-container {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
}

.tab-container .tab-items {
    width: 100px; /* 那根横线想要的宽度 */
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333; /* 黑字 */
}

.tab-container .active-tab {
    border-bottom: 3px solid #66F; /* 蓝线的宽度和颜色 */
    color: #66F;
}

Page的data里面增加一个activeTab
wxs文件

Page({
    data: {
        activeTab: 0,
    },
    /* 其他方法 起始*/
    /* 其他方法 终结*/
    switchTab: function (event) {
        if (event.currentTarget.id == 'tab0' && this.data.activeTab !== 0) { // 如果点击的是tab0且当然激活的不是tab0，下同
            this.setData({
                active: 0,
            });
        } else if (event.currentTarget.id == 'tab1' && this.data.activeTab !== 1) {
            this.setData({
                active: 1,
            });
        }
    },
}

我这边的电脑并没有开发环境，没法验证代码~所以难免会有错~请见谅~