使用vue-seamless-scroll 来实现无限滚动效果

最新推荐文章于 2025-01-07 15:37:14 发布

原创

最新推荐文章于 2025-01-07 15:37:14 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #css

本文介绍了如何在Vue项目中利用vue-seamless-scroll组件来创建无限滚动效果。步骤包括安装组件、全局引入、HTML布局、CSS样式设置、JS数据处理以及计算属性的配置，用于调整滚动条属性。

1.安装 vue-seamless-scroll

npm install vue-seamless-scroll --save

2.全局组件引入

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

3.html部分

<template>
  <div>
   <div class="box">
    <vue-seamless-scroll :data="list" :class-option="haha" class="seamless-warp">
      <ul>
        <li v-for="item in list" :key="item.index">{
   
   {
   
   item.name}}今年{
   
   {
   
   item.age}}岁</li>
      </ul>
    </vue-seamless-scroll>
   </d