大家請看上面這幅圖，它惟妙惟肖，栩栩如生，真好看。嘿，醒一下，給大家講解一下這張圖的構造哈，頭部三個導航欄，哦，不，它不是三個，有可能它是4，5個呢，不固定，不固定是什麼意思呢，研發經理說，頭部導航欄的資料不能在前臺寫死，要從後臺資料庫中拿，有幾條給我展示幾條，後臺存什麼展示什麼，ok。明白。那就先從佈局講，應該不會只有一個導航欄吧，嗯，應該不會。 ### 佈局 佈局採用flex，暫時定的資料是3條，我們可以把寬度先設定為33.333%，資料多的話橫向滾動。因為資料庫現在是隻有三條資料。為了模擬橫線滾動，將寬度設為50%設定了一下看效果圖2，子元素要設定一下`flex-shrink: 0;`不縮放。 ```css .container .tab-bar{ height: 85rpx; display: flex; align-items: center; background: #fff; margin-top: 15rpx; overflow-x: auto; overflow-y: hidden; } .container .tab-bar view{ flex-shrink: 0; width: 33.333%; height: 100%; line-height: 85rpx; text-align: center; box-sizing: border-box; } ``` ``` {{item.columns}} ``` 下面討論一下關於進入頁面怎麼請求資料，因為展示內容是根據導航欄的內容展示的，有多少坑就不說了，說一下最終的思路吧，因為我發現自己年紀輕輕已經開始愛絮叨了。 建議哈，所有請求介面的方法單獨寫，單獨封裝。 ### 功能 1. 第一步，肯定是要先請求tab即導航欄的資料了， ```javascript // 獲取tab欄 gettab(){ var app = getApp().globalData; //獲取全域性變數 var url = app.baseurlgzfw + apis.zskList //定義介面地址 var params1 = {} netUtil.postRequest(url,params1,this.onStart2, this.onSuccess2, this.onFailed2) // 非同步載入 setTimeout(()=>{ this.getlist() },500) ``` 大家看到哈，裡面有一個非同步載入，我沒有說定時器說非同步載入大家應該很容易理解吧，說到這裡簡直要給自己加個雞腿，這真的是我這個小白踩過幾個坑才發現這個寶物的，(還是給大家囉嗦一下吧，因為雖然淺顯易懂，但是我還是愛嘮叨，這樣也有助於自己思路再過一遍清晰流暢，後期看也能看懂，--------> 首先整個頁面的資料都是請求的，而且後續的請求還要根據前面請求到的資料去當作引數請求，本來是寫完gettab的時候寫的getlist,自己心裡給他定了個先後順序，但是瀏覽器的請求幾乎是同步的，前面請求的資料還沒渲染，後面的請求就開始了，當然是沒有獲取到資料，為了讓他獲取到資料笨笨的我想到了加個延遲函式，讓他延遲哪怕幾毫秒，也就是說我前面的函式執行完了再執行下面的函式) 2. 先給一個colunm值，讓getlist請求介面時有引數，後續可以根據點選再變化 ```javascript //在data中定義tab中的內容及當作的引數 this.setData({ tab:res, column:res[0].columns //先給一個colunm值，讓getlist請求介面時有引數，後續可以根據點選再變化 }) ``` 3. 第二部，獲取列表 ```javascript // 獲取列表 getlist(){ var app = getApp().globalData; //獲取全域性變數 var urlgzfw = app.baseurlgzfw + apis.queryList //定義介面地址 法律法規 var params = { "type": "9", "columns": this.data.column //1模組一、2模組二、3模組三 } netUtil.postRequest(urlgzfw,params,this.onStart1, this.onSuccess1, this.onFailed1) }, ``` 4. 點選tab更換data中的column， ```javascript // tab切換 tab: function (e) { // 獲取當前點選下標 let index = e.currentTarget.dataset['index'] this.setData({ num: index, column:e.currentTarget.dataset.column }) this.getlist() }, ``` 5. 最後一步也可以理解為第一步，在頁面載入時就請求介面 ```javascript /** * 生命週期函式--監聽頁面載入 */ onLoad: function (options) { // 獲取tab欄 this.gettab() // 獲取列表 }, ``` 6. 介面 ```json //知識庫模組名稱 （1）介面：/zskList.xhtml （2）返回資料： [ { "columns": "null", "moduleName": "com.hyjx.business.gzfw" }, { "columns": "B版塊", "moduleName": "com.hyjx.business.gzfw" }, { "columns": "A版塊", "moduleName": "com.hyjx.business.gzfw" }, { "columns": "C版塊", "moduleName": "com.hyjx.business.gzfw" } ] ``` ```json //列表 (1）介面：/queryList.xhtml （2）傳入引數示例： { "type": "9"， "columns": "A版塊"//通過上面介面查到的 } （3）返回資料： [ { "id": "924b3be183d64b8bbde45bf470f96893", "title": "1231231231231", "content": "\u0026lt;p\u0026gt;asdasdasdaasd\u0026lt;/p\u0026gt;\r\n",//內容 "lastdate": "2021-01-14 11:58:12.0", "columns": "A版塊",//模組 "source": "超級管理員",//來源 "knowledgetype": "文化相關",//知識分類 "moduleName": "com.hyjx.business.gzfw" }, { "id": "d38345d13c904eac819598a5fcb69d3e", "title": "測試版塊", "content": "\u0026lt;p\u0026gt;測試版塊\u0026lt;/p\u0026gt;\r\n", "lastdate": "2020-12-23 16:50:31.0", "columns": "A版塊", "source": "委辦局賬號", "knowledgetype": "經濟相關", "moduleName": "com.hyjx.business.gzfw" }, ] ``` ### 總結 初步感覺實現沒問題，想的很好，先獲取tab的資料，然後根據tab中獲取的資料請求list的資料，但是實現的時候一直沒有資料，但是點選切換的時候有資料顯示，分析原因就是初次載入函式的時候沒有載入getlist函式，但是檢視網路情況的時候是請求了的，只是傳的引數為空，再深度分析，就可以理解為他倆是同時被載入的，加個小小的延遲函式完美解決，小小的延遲函式大大的影