如圖：
這裡有兩個tab，要保證每次切換後列表保持不變，就必須在執行時要有兩個持久化的資料來源，每個tab是一個列表，讓我們來設計一下這樣的資料結構。
首先我們的資料結構是這樣的：
體現在vue的data是這樣的：
正好對應tab的索引，當tab改變時，tab會回撥索引：
模版中則動態切換使用的資料來源：
總結就是：tab預設索引為0，點選另一個tab時，在回撥中改變當前data的subsection_current為回撥的index，這樣模版就能動態切換資料來源了。
解決了動態切換資料來源的問題，我們再討論下如何頁面滑動切換tab，我這裡使用的是swiper元件。
首先我會預設初始tab個數的swiper元件到頁面：
每個swiper元件內嵌了一個瀑布流元件，這個元件原是uniapp外掛市場下載的，但是有一些問題，首先不能一次性載入多張圖片，而是需要一張圖片載入完成才能載入下一張圖片，我在此基礎上改進後，可以一次性載入一頁的全部圖片，並且擴充套件了一些自己的需求，基本上算重構了。
瀑布流的原理就是佈局為兩列或者多列，每頁資料輪流放到每一列中，如第一次是第一列，那麼第二次就放到第二列，依次類推。
我在swiper元件上有一個動態設定height的程式碼，這是因為swiper的高度需要是固定的一個值，也可以動態改變，我就會在每次分配資料到瀑布流的列之後計算一下兩列的高度，返回最高一列的高度到父元件，再動態設定到swiper上。
附上瀑布流動態分配程式碼以及獲取高度並重新分配、回撥高度重新設定swiper高度的程式碼。
首先是初次初始化瀑布流元件時：
handleViewRender函式方法體程式碼如下：
關鍵的獲取下一次需要分配資料到那列的方法以及獲取最高一列高度的程式碼如下：
獲取瀑布流中最高一列的高度：
我們再回到handleViewRender方法，每次分配資料到列都會emit一次高度資訊：
我們看看父元件是如何接受和處理通知的：
處理的方法很簡單，只是重新計算下每個tab的高度而已：
為啥這裡還多加了一個this.swpier_bottom_height呢？
因為emit的高度可能不夠，所以額外多加點高度撐起來，我這邊設定的高度為：
我們再回首看看swiper的:style：
當某個tab內容發生改變時，瀑布流元件就會通知父元件，父元件再更改每個資料來源中tab索引對應的height即可，這樣就能實現動態設定swiper高度了。
不錯，到這裡這個頁面已經完成了切換tab時可以動態切換資料來源的問題，高度也會自動重新設定，但是。。又一個新問題出現了，因為每個tab下的頁面都是需要向下滾動的，比如tab1滾動了1000px的距離，但我沒有操作tab2的頁面，理應tab2的頁面是沒有滾動的，但實際是tab2的滾動距離也是1000px，追其根由就是兩個tab的滾動距離沒有獨立出來。
所以我們又需要將每個tab的滾動高度也獨立出來，和每個tab有獨立的資料來源一樣，滾動距離也是每個tab獨有的，我是這麼設計資料結構的：
再多加一個欄位單獨記錄每個tab的滾動記錄，如tab1滾動了500px，tab2滾動了1000px，我切換到tab1時，設定滾動距離為500，切換到tab2時，設定滾動距離為1000px，理論的思路如上，我們進入程式碼部分：
滾動我使用了z-paging元件，這個元件提供了相當豐富的擴充套件，基本滿足上拉載入、下拉重新整理的全部需求了：
處理每次滾動時的回撥：
直接設定每個資料來源的滾動距離，設定完以後當切換tab時再動態設定為不同當前tab索引的滾動距離即可：
z-paging也提供了相應方法可以直接滾動到相應的位置。
OK，到這裡我們完成了點選或者左右滑動時都能切換tab，以及切換到不同tab時不同的資料來源、每個tab下資料載入時動態設定swiper高度、瀑布流自動依次分配資料到不同列的整體完整需求。
大家可以微信搜尋：《一方雲知》體驗一下上述的功能，因為我的後端是如果半個小時內沒有訪問的話自動關機的，所以大家遇到頁面一隻loading的話，可能等待1-2分鐘即可啟動了。
該功能路徑：開啟小程式->精選圖片。
這篇分享文章就到這裡啦！如果你對文章內容有疑問或想要深入討論，歡迎在評論區留言，我會盡力回答。同時，如果你覺得這篇文章對你有幫助，不妨點個贊並分享給其他同學，讓更多人受益。
想要了解更多相關知識，可以檢視我以往的文章，其中有許多精彩內容。記得關注我，獲取及時更新，我們可以一起學習、討論技術，共同進步。
感謝你的閱讀與支援，期待在未來的文章中與你再次相遇！
我的微信公眾號：【xdub】，歡迎大家訂閱，我會同步文章到公眾號上。