vue实现列表自动滚动(纯与原生方式)
在Vue中实现列表自动滚动,可以通过原生JavaScript操作列表容器的scrollTop属性来实现。以下是一个简单的例子:
<template>
<div class="list-container" ref="listContainer">
<ul>
<li v-for="item in items" :key="item">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3', ..., 'Item N'] // 假设有N个条目
};
},
mounted() {
this.startAutoScroll();
},
methods: {
startAutoScroll() {
const listContainer = this.$refs.listContainer;
setInterval(() => {
listContainer.scrollTop += 1;
if (listContainer.scrollHeight - listContainer.scrollTop === listContainer.clientHeight) {
listContainer.scrollTop = 0; // 如果到达底部,则重置滚动位置到顶部
}
}, 100); // 每0.1秒滚动1像素
}
}
};
</script>
<style>
.list-container {
height: 200px; /* 设置一个固定的高度 */
overflow: auto; /* 开启滚动 */
}
</style>
在这个例子中,我们有一个名为list-container的容器,它包含一个ul列表。我们在mounted钩子中调用startAutoScroll方法,该方法使用setInterval每0.1秒滚动列表的一个像素。如果滚动到达列表底部,它会重置滚动位置到顶部,实现循环滚动的效果。
原文地址:https://blog.csdn.net/Rverdoser/article/details/142923388
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!