【CSS】类似淘宝金刚区的滚动条效果-vue版本

html部分

两行，可能会前后对齐有些问题，看了下淘宝是每列2个icon, 根据总数分成n列

len : icon的个数； list ：icon对应的列表； 奇数时，考虑最后一个没有的处理，这里不说明了

金刚区样式部分这里就不具体介绍了，滚动条部分可以如下：

下面直接写金刚区滚动事件改变滚动条（进度条）的样式

用 left ，也可以用 transform: translate();

keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

---------------------------------------------------------------------------------------------------->

---------------------------------------------------------------------------------------------------->

1 header组件开发总结

  1）使用classMap设置优惠活动项

  2）设置了公共样式自定义属性：border-1px($color)解决移动端1px问题

       bg-image($url) 解决背景在不同设备像素比之下的大小

2headerd出层组件开发

d出层的内容部分采用 css sticky footer布局 ：

。最外层容器负责该d出层的整体位置 背景以及控制浮层的展示和隐藏

。外层两个容器一个内容层（清除浮动），一个定在底部的底部层

。内容层里面再建立一个内容层装主要内容

布局 如下：

关于样式 ：

。外层容器 detail-wrapper设置min-height:100%(最小高度有视口那么高)

。detail-close为底部固定层，相对定位，设置-margin值来使它保留在底部

。注意：内容层detail-main设置margin-bottom来为使其不会遮盖住底部固定层

样式如下：

。加入文字进行测试发现文字短的时候close在底部，文字长的时候，close在内容层最底部

控制浮层展示和隐藏 ：

。dom上使用v-show="变量名"进行控制

。实例中设置data函数返回变量名的值为false(默认不展示)

。需要控制点击展示的dom上使用@click=“方法名”

。在实例methods中定义方法使变量名的值为相反

2 星星组件开发

公共部分抽离成公共组件

。建立组件star接受两个参数星星数和大小，数据类型为Number

。使用计算属性来改变star 类名达到改变大小的目的

。

实现原理：建立一个数组result,声明变量 hasDecimal代表有小数点的情况，integer代表整数的部分。遍历整数部分，将类名on放入数组result中，如果有半星的情况就就放置类名off,剩下的放off。由于半星只会放置一个，所以不需循环。

。在header组件中引用star组件，使用star标签测试成功就可以了

布局方面：

效果：页面左右两边没有滚动条，页面长度超过视口，页面可以上下滑动

解决：定义视口的高度。将视口盒子绝对定位

首先   将商品goods数据mock到页面中，同header中seller数据请求

实现垂直居中使用table

实现页面垂直滚动：

。实现视口里的内容能够滚动，使用better-scroll库 >

以上就是关于【CSS】类似淘宝金刚区的滚动条效果-vue版本全部的内容，包括:【CSS】类似淘宝金刚区的滚动条效果-vue版本、vue项目keep-alive返回记住滚动条位置、饿了么 VUE组件开发2018-09-26等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！