使用mint-ui Navbar遇到的一個小坑
阿新 • • 發佈:2019-01-28
根據官方文件例子的描述navbar要這樣使用:
<mt-navbar v-model="selected">
<mt-tab-item id="1">選項一</mt-tab-item>
<mt-tab-item id="2">選項二</mt-tab-item>
<mt-tab-item id="3">選項三</mt-tab-item>
</mt-navbar>
<!-- tab-container -->
<mt-tab-container v-model="selected" >
<mt-tab-container-item id="1">
<mt-cell v-for="n in 10" :title="'內容 ' + n" />
</mt-tab-container-item>
<mt-tab-container-item id="2">
<mt-cell v-for="n in 4" :title="'測試 ' + n" />
</mt-tab-container-item>
<mt-tab-container-item id="3">
<mt-cell v-for="n in 6" :title="'選項 ' + n" />
</mt-tab-container-item>
</mt-tab-container>
但是注意程式碼中有下劃線的地方,這種寫法會導致一個問題,頁面載入後,不會將你設定的頁面選中顯示出來,如果想頁面載入後就顯示其中的某個子頁,那就這樣寫
<mt-navbar v-model="selected">
<mt-tab-item :id="1">選項一</mt-tab-item>
<mt-tab-item :id="2">選項二</mt-tab-item >
<mt-tab-item :id="3">選項三</mt-tab-item>
</mt-navbar>
<!-- tab-container -->
<mt-tab-container v-model="selected">
<mt-tab-container-item :id="1">
<mt-cell v-for="n in 10" :title="'內容 ' + n" />
</mt-tab-container-item>
<mt-tab-container-item :id="2">
<mt-cell v-for="n in 4" :title="'測試 ' + n" />
</mt-tab-container-item>
<mt-tab-container-item :id="3">
<mt-cell v-for="n in 6" :title="'選項 ' + n" />
</mt-tab-container-item>
</mt-tab-container>