小程序開發頂部TAB欄和側邊分類點擊

先上一個效果圖：

根據這個效果圖我來說內容。

首先是頂部tab欄

效果實現依靠的是一個組件scroll-view。這個組件很有意思，可以多層嵌套，當然它的屬性也很多。
這里主要用的是scroll-x，scroll-x的默認值是false，我們要設置為true。這一步我們僅僅是實現了可以左右滑動。
更重要的是如何判斷滑動到了哪個位置，怎么獲取對應內容。滑動距離由於我們是左右滑動所以這里是scroll-left，給scroll-left動態賦值。
這里我先上代碼

<scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}">
   <view class="tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="swichNav">請假</view>
   <view class="tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="swichNav">離職</view>
   <view class="tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="swichNav">部門</view>
   <view class="tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="swichNav">員工</view>
   <view class="tab-item {{currentTab==4?'active':''}}" data-current="4" bindtap="swichNav">事項</view>
   <view class="tab-item {{currentTab==5?'active':''}}" data-current="5" bindtap="swichNav">消息</view>
   <view class="tab-item {{currentTab==6?'active':''}}" data-current="6" bindtap="swichNav">設置</view>
 </scroll-view>

樣式上我們用 {{currentTab==6?‘active’:’’}}，這是一個三目運算，做邏輯判斷的。相應的就要給current設置對應的序號，就是data-current的內容。除了滑動事件外，我們還需要加一個點擊事件bindtap=“swichNav”。因為你不可能只用滑動顯示的吧。
好了接下來看看JS中如何配置
這是在公共data{}存貯的內容，供給頁面和函數來調用

interval: 5000,
duration: 500,
currentTab: 0, //預設當前項的值
scrollLeft: 0, //tab標題的滾動條位置

函數中這樣來寫，如果我們只有一屏的寬度內容滾動， this.checkCor();就用不到了。但是如果像示例圖那樣很多，我們還要判斷超出一屏的寬度后要左移多少距離來顯示后面的tab項，也就是scrollLeft給一個寬度值。

// 滾動切換標簽樣式
  switchTab: function(e) {
    this.setData({
      currentTab: e.detail.current
    });
    this.checkCor();
  },
  // 點擊標題切換當前頁時改變樣式
  swichNav: function(e) {
    var cur = e.target.dataset.current; //查詢標題序號
    if (this.data.currentTaB == cur) {
      return false;
    } else {
      this.setData({
        currentTab: cur
      })
    }
  },
  //判斷當前滾動超過一屏時，設置tab標題滾動條。
  checkCor: function() {
    if (this.data.currentTab > 4) {
      this.setData({
        scrollLeft: 300
      })
    } else {
      this.setData({
        scrollLeft: 0
      })
    }
  },

這樣簡單的頂部tab滑動效果就出來了。附上樣式：

/*頂部切換*/

.tab-h {
  height: 80rpx;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  line-height: 80rpx;
  background: #f7f7f7;
  font-size: 16px;
  white-space: nowrap;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}

.tab-item {
  margin: 0 36rpx;
  display: inline-block;
}

.tab-item.active {
  color: #4675f9;
  position: relative;
}

.tab-item.active:after {
  content: "";
  display: block;
  height: 8rpx;
  width: 54rpx;
  background: #4675f9;
  position: absolute;
  bottom: 0;
  left: 5rpx;
  border-radius: 16rpx;
}

接着說側邊欄點擊

側邊欄效果圖
就想購物商城的分類點擊一樣。這里主要用到的就是官方的框架：數據綁定、列表渲染、條件渲染
具體在代碼中是這樣用到的：

<!--主盒子-->
      <view class="containers">
        <!--左側欄-->
        <view class="nav_left">
          <block wx:for="{{cateItems}}" wx:key="">
            <view class="nav_left_items {{curNav == item.cate_id ? 'active' : ''}}" bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.cate_id}}">{{item.cate_name}}</view>
          </block>
        </view>
        <!--右側欄-->
        <view class="nav_right">
          <!--如果有數據，才遍歷項-->
          <view wx:if="{{cateItems[curIndex].ishaveChild}}">
            <block wx:for="{{cateItems[curIndex].children}}" wx:key="">
              <view class="nav_right_items">
                <!--界面跳轉 -->
                <navigator url="">
                  <image src="{{item.image}}"></image>
                  <text>{{item.name}}</text>
                </navigator>
              </view>
            </block>
          </view>
          <!--如果無數據，則顯示數據-->
          <view class="nodata_text" wx:else>該分類暫無數據</view>
        </view>
      </view>

左側是一個部分，需要用列表渲染 wx:for="{{cateItems}}"，將左側的各個分類用一個列表展示出來，{{cateItems}}是一個數組。對應分類的點擊添加樣式我們仍然用三目運算判斷{{curNav == item.cate_id ? ‘active’ : ‘’}}"。左側分類的item我們寫在JS中

cateItems: [{
     cate_id: 1,
     cate_name: "公共程序",
     ishaveChild: true,
     children：[{}]
   },
   {
     cate_id: 2,
     cate_name: "公共策划",
     ishaveChild: true,
      children：[{}]
   },
   {
     cate_id: 3,
     cate_name: "鄭州項目",
     ishaveChild: true,
      children：[{}]
   },
   {
     cate_id: 4,
     cate_name: "成都項目",
     ishaveChild: true,
      children：[{}]
   },
   {
     cate_id: 5,
     cate_name: "三方客服",
     ishaveChild: true,
      children：[{}]
   }
 ],
 curNav: 1,
 curIndex: 0,

這部分仍然是在公共data中實現，有人會說能否獲取服務器內容來填充呢，當然可以實現，這就需要你請求接口，然后存貯data，道理是一樣的。
可以看到在分類的item中都給了id值，這也是必須的一步，因為要確保點擊對應的分類來實現顯示對應的內容，添加對應的樣式，所以給上id來排序號。
當然在代碼中也要全部列出item的內容。

<view class="nav_left_items {{curNav == item.cate_id ? 'active' : ''}}" bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.cate_id}}">{{item.cate_name}}</view>

對應的方法我們要在JS中配置出來：

//部門列表點擊  
  switchRightTab: function(e) {
    // 獲取item項的id，和數組的下標值  
    let id = e.target.dataset.id,
      index = parseInt(e.target.dataset.index);
    // 把點擊到的某一項，設為當前index  
    this.setData({
      curNav: id,
      curIndex: index
    })
  },

有了這個點擊函數就可以展示對應的內容了。
還有一步我做簡單說明：

 <view wx:if="{{cateItems[curIndex].ishaveChild}}">
            <block wx:for="{{cateItems[curIndex].children}}" wx:key="">

這個列表渲染wx:if="{{cateItems[curIndex].ishaveChild}}，就是判斷當前分類是否被點擊到，點擊到ishaveChild的值是true的就展示對應的內容。wx:for="{{cateItems[curIndex].children}}"，則是請求item的children內容。children也可以用請求服務器內容來實現，同樣是把請求到的數據儲存到本地，然后給頁面渲染出來。

curNav: 1,
 curIndex: 0,

這兩個值是初始化內容，就是默認是列表的第一個內容優先展示。

好了本期就說這些，有不懂的可以留言。