是我在借鉴大佬的js表格实现平滑滚动的效果后,放在我的项目里。
刚开始把数据写死的时候,列表可以正常上下平滑滚动
但是吧 真实情况下。数据肯定是活的
就想着先本地模拟一下数据。看看后端需要什么格式的数据
bug来了
<div id="roll_box" @mouseover="rollStop()" @mouseout="rollStart(60)">
<ul id="comment1"> <li v-for="item in tableData" :key="item.Id" class="list-style">
<div class="item-style">
<span class="comSpan">{{ item. }}</span>
<span class="comSpan">{{ item. }}</span>
<span class="comSpan">{{ item. }}</span>
<span class="comSpan">{{ item. }}</span>
</div>
</li>
</ul>
<ul id="comment2">
<li v-for="item in tableData" :key="item.Id" class="list-style">
<div class="item-style">
<span class="comSpan">{{ item. }}</span>
<span class="comSpan">{{ item. }}W</span>
<span class="comSpan">{{ item. }}K</span>
<span class="comSpan">{{ item. }}%</span>
</div>
</li>
</ul>
</div>
数据写死的时候 第二个ul 在渲染的时候会自动添加数据,只是渲染的时候被隐藏了,所以可以顺利平滑滚动;
但是 动态获取数据的时候 如果第二个ul只有
<ul id="comment2">
</ul>
这样得话 这个ul高度为0 就是说并没有内容 当然不能顺利平滑滚动 所以也就出现了 只滚动一次的bug
解决方式 就是第一个代码块
【在动态获取的数据的时候 让第二个也去利用v-for渲染一个一摸一样的】
这样 问题。就解决了