在很多移动端APP或者小程序中，我们经常会看到这样的一个组件：侧边选项卡。通常在对商品进行分类的时候需要使用到这个组件。大概的样式如下图所示。
我们先看一下在这个案例里边，侧边选项卡有什么特点，可以怎么制作它。
首先看看侧边的分类菜单，这个菜单分类较多，它有两个特点：
1、拖动分类菜单，可以显示更多的分类内容。
2、点击我们看到比较靠下方（实际上在是所有分类的中间范围）的分类，分类名称会移动到一定的位置。比如点击“热带水果”这个分类
当然，除了位置的变化之后，我们能看到右边的商品在变化，从而匹配上我们所选择的分类的。可能有些朋友到这里已经有思路了，没错，就是使用都动态面板去做。
这我们一起来看看制作的思路。
01
设置动态面板的拖动时事件。外层动态面板作为内容区，内层动态面板作为滚动区。在拖动内容区的时候，移动滚动区，这里注意给移动设置边界。边界是可以使用固定的数值，也可以使用函数，巧妙利用滚动区的高度。这里是垂直移动，所以是高度。
右侧商品的拖动也是一样的设置方法和思路。
02
设置分类选项的鼠标单击事件，鼠标单击时，移动滚动区的位置。这里主要是要明白移动的位置如何设置。X轴的数值不用说，是0，因为在水平方向上移动。主要是来看看垂直方向上所移动到的位置。
我们以最外层的分类菜单的高度为依据，在点击某些分类选项的时候，这个分类是位于菜单的中间的。计算出当前最外层的分类菜单的中间的位置，这就是这个分类选项的位置。但是因为我们移动的是整个滚动区，所以要计算的是滚动区的位置。
做好之后的效果大家可以点击演示效果，自己操作一下。
https://h9ujqt.axshare.com
大家也可以使用具体的数值去做，缺点是要记住多个数值，但是理解起来会容易一些。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
