小程式開發頂部TAB欄和側邊分類點選

先上乙個效果圖：

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

效果實現依靠的是乙個元件scroll-view。這個元件很有意思，可以多層巢狀，當然它的屬性也很多。

這裡主要用的是scroll-x，scroll-x的預設值是false，我們要設定為true。這一步我們僅僅是實現了可以左右滑動。

更重要的是如何判斷滑動到了哪個位置，怎麼獲取對應內容。滑動距離由於我們是左右滑動所以這裡是scroll-left，給scroll-left動態賦值。

這裡我先上**

請假離職部門員工事項訊息設定

樣式上我們用}，這是乙個三目運算，做邏輯判斷的。相應的就要給current設定對應的序號，就是data-current的內容。除了滑動事件外，我們還需要加乙個點選事件bindtap=「swichn**」。因為你不可能只用滑動顯示的吧。

好了接下來看看js中如何配置

這是在公共data{}存貯的內容，供給頁面和函式來呼叫

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

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

// 滾動切換標籤樣式
switchtab: function(e) );
this.checkcor();
},// 點選標題切換當前頁時改變樣式
swichn**: function(e) else )}},
//判斷當前滾動超過一屏時，設定tab標題滾動條。
checkcor: function() )
} else )}},

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

/*頂部切換*/ .tab-h .tab-item .tab-item.active .tab-item.active:after

側邊欄效果圖

就想購物**的分類點選一樣。這裡主要用到的就是官方的框架：資料繫結、列表渲染、條件渲染

具體在**中是這樣用到的：

}
} 
該分類暫無資料

左側是乙個部分，需要用列表渲染wx:for="}"，將左側的各個分類用乙個列表展示出來，}是乙個陣列。對應分類的點選新增樣式我們仍然用三目運算判斷}"。左側分類的item我們寫在js中

cateitems: },]
},]},]
},]}], curn**: 1,
curindex: 0,

這部分仍然是在公共data中實現，有人會說能否獲取伺服器內容來填充呢，當然可以實現，這就需要你請求介面，然後存貯data，道理是一樣的。

可以看到在分類的item中都給了id值，這也是必須的一步，因為要確保點選對應的分類來實現顯示對應的內容，新增對應的樣式，所以給上id來排序號。

當然在**中也要全部列出item的內容。

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

//部門列表點選  
switchrighttab: function(e) )
},

有了這個點選函式就可以展示對應的內容了。

還有一步我做簡單說明：

這個列表渲染wx:if="}，就是判斷當前分類是否被點選到，點選到ish**echild的值是true的就展示對應的內容。wx:for="}"，則是請求item的children內容。children也可以用請求伺服器內容來實現，同樣是把請求到的資料儲存到本地，然後給頁面渲染出來。

curn**: 1, curindex: 0,

這兩個值是初始化內容，就是預設是列表的第乙個內容優先展示。

小程式開發頂部TAB欄和側邊分類點選

小程式自定義頂部導航欄

微信小程式橫版日曆，tab欄

微信小程式 tab 導航欄切換

小程式開發頂部TAB欄和側邊分類點選

小程式 自定義頂部導航欄

微信小程式橫版日曆，tab欄

微信小程式 tab 導航欄切換

相關推薦

小程式自定義頂部導航欄