頭部導航欄也是動態的，板塊裡面的內容根據頭部導航欄動態展現資料

張尊娟發表於2021-01-20


大家請看上面這幅圖，它惟妙惟肖，栩栩如生，真好看。嘿，醒一下，給大家講解一下這張圖的構造哈，頭部三個導航欄，哦，不，它不是三個，有可能它是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>

下面討論一下關於進入頁面怎麼請求資料，因為展示內容是根據導航欄的內容展示的，有多少坑就不說了，說一下最終的思路吧，因為我發現自己年紀輕輕已經開始愛絮叨了。

建議哈，所有請求介面的方法單獨寫，單獨封裝。

功能

  1. 第一步，肯定是要先請求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,自己心裡給他定了個先後順序，但是瀏覽器的請求幾乎是同步的，前面請求的資料還沒渲染，後面的請求就開始了，當然是沒有獲取到資料，為了讓他獲取到資料笨笨的我想到了加個延遲函式，讓他延遲哪怕幾毫秒，也就是說我前面的函式執行完了再執行下面的函式)

  1. 先給一個colunm值，讓getlist請求介面時有引數，後續可以根據點選再變化
//在data中定義tab中的內容及當作的引數
this.setData({
      tab:res,
      column:res[0].columns    //先給一個colunm值，讓getlist請求介面時有引數，後續可以根據點選再變化
    })
  1. 第二部，獲取列表
  // 獲取列表
  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)
  },
  1. 點選tab更換data中的column，
// tab切換
  tab: function (e) {
    // 獲取當前點選下標
    let index = e.currentTarget.dataset['index']
    this.setData({
      num: index,
      column:e.currentTarget.dataset.column
    })
    this.getlist()
  },
  1. 最後一步也可以理解為第一步，在頁面載入時就請求介面
 /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    // 獲取tab欄
  this.gettab()
    // 獲取列表
  },
  1. 介面
//知識庫模組名稱
（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函式，但是檢視網路情況的時候是請求了的，只是傳的引數為空，再深度分析，就可以理解為他倆是同時被載入的，加個小小的延遲函式完美解決，小小的延遲函式大大的影響力。

相關文章