vantui使用tab標籤頁遇到的問題

2021-10-06 02:48:51 字數 414 閱讀 6052

vantui使用tab標籤頁遇到的問題

場景:切換訂單和退單選項卡,通過tab標籤頁分別顯示其中各狀態(待收貨,待發貨等)的資料,由於兩個選項卡因為內容導致長度差距不一樣,所以使用了兩個tab標籤頁。

bug1:訂單選項卡下切換到第二個狀態,這時切換到退單選項卡也是第二個狀態。

解決辦法:使用提供的v-model屬性,動態繫結每個標籤的name值。

bug2:比如從退單選項卡的某個狀態下切換到訂單選項卡,此時會報一些defind的錯誤,思考後發現可能是這裡的v-model屬性雙向繫結的問題,動態修改了data中的變數值。

解決辦法:建立乙個新的值,產生和改變都跟之前繫結的值一樣(就是模擬乙個),

然後用這個值跟v-model繫結,這樣v-model既解決了bug1也不會再產生bug2了。

tab 標籤頁實現

標籤頁功能是乙個比較常用的功能。雖然很多前端框架 外掛程式都帶有若干種標籤頁的功能實現,我依然覺得掌握其基本實現會更有利於我們對這個功能的理解,我們也可以更容易地根據實際情況進行修改。以下 示例是乙個比較常見的實現 春天的雨是柔和的,只見春雨在竹枝 竹葉上跳動著。那雨時而直線滑落,時而隨風飄灑,留下...

tab標籤頁切換

第一種 first second tab title li click function script 第二種 notice notice tit notice tit ul notice tit ul li notice tit ul a notice tit ul select 我是內容1 我是...

整理用js實現tab標籤頁

12 8.notice 15.notice tit 20.notice tit ul 2526 notice tit ul li 35.notice tit ul a 39.notice tit ul select 46 notice tit ul li hover 53 注意 1.需要給.noti...