今天主要是做筛选组件的开发。
image.png
点开综合排序
image.png
点击筛选
image.png
首先先从后台导入数据保存在data里，用v-for遍历出来。
代码不是很复杂，但是逻辑还是较为繁琐。
首先点击综合排序的时候，要出现第二张图片的五个数据。此时，周围背景应该是透明色，凸显综合排序。点击起送价最低一行的时候，综合排序变成点击起送价，并且颜色变了，周围透明背景消失。
image.png
然后做筛选的时候，点击筛选按钮出来筛选选择框，周围变成透明背景。商品特殊和人均价这些数据都从后台接口导入。点击筛选再点击综合排序，筛选框消失，出现综合排序。反之综合排序消失。
image.png
最后当页面的滚动距离大于综合排序离顶部的距离，综合排序这行固定在页面的最上面。在 onload 函数里监听综合排序距离顶部的距离，用onPageScroll函数监听页面的滚动距离。在计算属性里使用判断。还是一个小问题，当点击综合排序这行的任何数据时候，立即回到底部，综合排序这行固定起来。
