分类：vue列表滚动

2021
09-24

vue实现列表无缝滚动

本文实例为大家分享了vue实现列表无缝滚动的具体代码，供大家参考，具体内容如下HTML部分代码<template><divid="box"class="wrapper"><divclass="contain"id="con1"ref="con1":class="{anim:animate==true}"><Listv-for="(item,index)incloudList":key="index":listData="item":index="index":date="date"></List></div></div></template>List是单个列表... 继续阅读 >

2020
10-08

vue实现列表滚动的过渡动画

本文实例为大家分享了Vue实现列表滚动过渡动画的具体代码，供大家参考，具体内容如下效果图失帧比较严重，在手机上效果更佳。原理分析这个滚动页面由两个部分布局（底部固定的Tab页面除外）。一个是顶部的banner轮播，一个是下面的列表。这里的重点是做列表的动画，banner轮播的网上资料很多，请自行查找。这个动画最重要的是在滚动中实时计算startIndex和endIndex，动画比较简单，就是scale和opacity的变化。向下滚动时，startInd... 继续阅读 >