2302_76980664的博客

instantiateItem用于在viewpager的指定页面插入新的视图，我的代码中，我创建了ImageVIew控件，通过每次滑动时取position%imgList.length来实现图片无限轮播的效果，这样就不会使得向后或者向前滑动的时候没有内容了，然后通过container.addView将我创建的ImageView控件放到viewpager组件里面。设置以上方法后便可以实现轮播图的滑动，但是在实际的应用中，往往还设置了banner的自动轮播，所以我又添加了自动轮播的方法。以下是我个人的方法。

这里通过设置父元素（container）的高度为0，刚开始的最大高度为0，超出部分隐藏，从而隐藏了子元素的，用js控制，如果当前的存在最大高度，那就改变父元素最大高度的值为“”，相反，如果不存在，责可以设置它的max-height为一个合适的值，多大都行，因为max-height只是设置一个最大的边界值，不代表container的高度，而他的高度实际上是多个li元素的高度和，这样就实现了，它的下拉与收起。如有疑问，可以私信我。

【代码】阿里巴巴矢量图标库首页。

【代码】jq实现网易云首页。

上述代码通过设置测试函数以及颜色变化函数来使得测试的进行，通过鼠标按下事件mousedown来控制点击后的变化，以及下一次测试的推进，逻辑很简单，就时记录颜色开始变化的时间以及用户点击的时间，相减及得到了用户的反应速度。使用flag来避免用户的提前点击从而使得测试不准确，代码逻辑比较简单，不懂的话可以私信询问我。

可以明显看到在父元素上设置的mouseover事件对于在子元素上同样生效，但需要注意的一点就是，mouseout事件在于你鼠标进入子元素上时就会生效，这一点尤其需要注意，虽说违背了本身离开这个元素的意思，但是没想到进入子元素也算离开。因为网易云的播放条离开时是有setTimeout的，所以我们需要在进入的时候清楚定时器，否则在子元素上会有out效果，导致它会处于out-enter的循环，会出现波动。就正常的鼠标进入和离开的例子，最简单的情况就是只有一个元素，如下面代码。现在讨论存在子元素的情况。

通过transition-group组件中的特殊css，v-enter,v-enter-active,v-enter-to,v-leave,v-leave-active,v-leave来控制轮播图的无缝滚动，需要注意的是我们通过左右两个按钮来控制轮播图的左右两个切换效果（通过改变name值），这种方法首先得了解vue的列表过度，如果有不理解的，随时联系我。常规的无缝轮播图的写法是要通过控制banner的transition属性的有无来使得其无缝衔接。html代码如下，通过vue来控制轮播图的位置以及显示。