頭部導航欄也是動態的，板塊裏面的內容根據頭部導航欄動態展現數據
大家請看上面這幅圖，它惟妙惟肖，栩栩如生，真好看。嘿，醒一下，給大家講解一下這張圖的構造哈，頭部三個導航欄，哦，不，它不是三個，有可能它是4，5個呢，不固定，不固定是什麼意思呢，研發經理說，頭部導航欄的數據不能在前台寫死，要從後台數據庫中拿，有幾條給我展示幾條，後台存什麼展示什麼，ok。明白。那就先從布局講，應該不會只有一個導航欄吧，嗯，應該不會。
布局
布局採用flex，暫時定的數據是3條，我們可以把寬度先設置為33.333%，數據多的話橫向滾動。因為數據庫現在是只有三條數據。為了模擬橫線滾動，將寬度設為50%設置了一下看效果圖2，子元素要設置一下flex-shrink: 0;不縮放。
.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;
}
<view class="tab-bar shadow">
<view class="{{ num == index ? 'active' : ''}}" bindtap="tab" wx:for="{{tab}}" wx:key="index" data-index="{{index}}" data-column="{{item.columns}}">{{item.columns}}</view>
</view>
下面討論一下關於進入頁面怎麼請求數據，因為展示內容是根據導航欄的內容展示的，有多少坑就不說了，說一下最終的思路吧，因為我發現自己年紀輕輕已經開始愛絮叨了。
建議哈，所有請求接口的方法單獨寫，單獨封裝。
功能
- 第一步，肯定是要先請求tab即導航欄的數據了，
// 獲取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,自己心裏給他定了個先後順序，但是瀏覽器的請求幾乎是同步的，前面請求的數據還沒渲染，後面的請求就開始了，當然是沒有獲取到數據，為了讓他獲取到數據笨笨的我想到了加個延遲函數，讓他延遲哪怕幾毫秒，也就是說我前面的函數執行完了再執行下面的函數)
- 先給一個colunm值，讓getlist請求接口時有參數，後續可以根據點擊再變化
//在data中定義tab中的內容及當作的參數
this.setData({
tab:res,
column:res[0].columns //先給一個colunm值，讓getlist請求接口時有參數，後續可以根據點擊再變化
})
- 第二部，獲取列表
// 獲取列表
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)
},
- 點擊tab更換data中的column，
// tab切換
tab: function (e) {
// 獲取當前點擊下標
let index = e.currentTarget.dataset['index']
this.setData({
num: index,
column:e.currentTarget.dataset.column
})
this.getlist()
},
- 最後一步也可以理解為第一步，在頁面加載時就請求接口
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
// 獲取tab欄
this.gettab()
// 獲取列表
},
- 接口
//知識庫模塊名稱
（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"
}
]
//列表
(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函數，但是查看網絡情況的時候是請求了的，只是傳的參數為空，再深度分析，就可以理解為他倆是同時被加載的，加個小小的延遲函數完美解決，小小的延遲函數大大的影響力。
