vue可点击列表加滑块怎么实现
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue可点击列表加滑块怎么实现相关的知识,希望对你有一定的参考价值。
参考技术A 列表横向排列可以使用flex布局解决,主要逻辑在左右滑动的控制上面。在样式上来看,左右滑动其实可以看成:改变position为relative时属性left值。
内层div装有列表的各项item,所以它的宽度可能会大于外层div的宽度。外层div采用定宽,同时设置overflow: hidden,使内层div突出的部分隐藏起来。然后通过设置内层div的position: relative,调整left属性的值来达到左右滑动的效果。
如上图,把外层div的宽度称为boxLength,内层div的宽度称为allLength,属性值left的绝对值(因为这里left的值应该为负数)称为leftMove。
基于上面的分析,如果左右两个按钮要控制滑动,实际上就是控制left的属性值。
先来分析右边的按钮:
假设一个列表项目item的宽度为120px,如果要向右移动3个项目item单位,实际上是将left属性值-360。
而且从上图容易得到,当leftMove+boxLength ≥ allLength的时候,向右滑动就应该暂停。
但这里有个小细节,如果内层div(红)右边隐藏部分的width < 360px,则应该只移动那小于360px的一部分宽度,而不应该直接向左移动360px,不然外层div的右侧就会有一段空白。
以上是关于vue可点击列表加滑块怎么实现的主要内容,如果未能解决你的问题,请参考以下文章