在很多移動端APP或者小程序中，我們經常會看到這樣的一個組件：側邊選項卡。通常在對商品進行分類的時候需要使用到這個組件。大概的樣式如下圖所示。
我們先看一下在這個案例裏邊，側邊選項卡有什麼特點，可以怎麼製作它。
首先看看側邊的分類菜單，這個菜單分類較多，它有兩個特點：
1、拖動分類菜單，可以顯示更多的分類內容。
2、點擊我們看到比較靠下方（實際上在是所有分類的中間範圍）的分類，分類名稱會移動到一定的位置。比如點擊“熱帶水果”這個分類
當然，除了位置的變化之後，我們能看到右邊的商品在變化，從而匹配上我們所選擇的分類的。可能有些朋友到這裏已經有思路了，沒錯，就是使用都動態面板去做。
這我們一起來看看製作的思路。
01
設置動態面板的拖動時事件。外層動態面板作爲內容區，內層動態面板作爲滾動區。在拖動內容區的時候，移動滾動區，這裏注意給移動設置邊界。邊界是可以使用固定的數值，也可以使用函數，巧妙利用滾動區的高度。這裏是垂直移動，所以是高度。
右側商品的拖動也是一樣的設置方法和思路。
02
設置分類選項的鼠標單擊事件，鼠標單擊時，移動滾動區的位置。這裏主要是要明白移動的位置如何設置。X軸的數值不用說，是0，因爲在水平方向上移動。主要是來看看垂直方向上所移動到的位置。
我們以最外層的分類菜單的高度爲依據，在點擊某些分類選項的時候，這個分類是位於菜單的中間的。計算出當前最外層的分類菜單的中間的位置，這就是這個分類選項的位置。但是因爲我們移動的是整個滾動區，所以要計算的是滾動區的位置。
做好之後的效果大家可以點擊演示效果，自己操作一下。
https://h9ujqt.axshare.com
大家也可以使用具體的數值去做，缺點是要記住多個數值，但是理解起來會容易一些。