鍍金池/ 問答/HTML/ 微信小程序切換如何實現(xiàn)？

微信小程序切換如何實現(xiàn)？

clipboard.png

tarBar使用position屬性設(shè)置top可以實現(xiàn)這種效果。
我的項目中還有一處也是這種狀態(tài)。
這種頁面的切換如何實現(xiàn)？

回答
編輯回答
玩控

1.http://www.jb51.net/article/1...
2.https://zhuanlan.zhihu.com/p/...
目前tarbar只能在app.json不能在組件內(nèi)使用。

2018年6月9日 09:57
編輯回答
愿如初

我也是剛嘗試做小程序不久，可能有更適合的辦法不一定~
tabBar只能實現(xiàn)一級的標(biāo)簽切換，二級的好像并不能在對應(yīng)頁面的json里添加tabBar標(biāo)簽，于是只好自己實現(xiàn)……
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; /* 藍(lán)線的寬度和顏色 */
    color: #66F;
}

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

Page({
    data: {
        activeTab: 0,
    },
    /* 其他方法 起始*/
    /* 其他方法 終結(jié)*/
    switchTab: function (event) {
        if (event.currentTarget.id == 'tab0' && this.data.activeTab !== 0) { // 如果點擊的是tab0且當(dāng)然激活的不是tab0，下同
            this.setData({
                active: 0,
            });
        } else if (event.currentTarget.id == 'tab1' && this.data.activeTab !== 1) {
            this.setData({
                active: 1,
            });
        }
    },
}

我這邊的電腦并沒有開發(fā)環(huán)境，沒法驗證代碼~所以難免會有錯~請見諒~

2017年8月13日 11:56