VUE实现列表滚动

最新推荐文章于 2024-09-06 17:16:52 发布

陆江河

最新推荐文章于 2024-09-06 17:16:52 发布

阅读量626

点赞数

分类专栏：前端文章标签： vue 列表前端

本文链接：https://blog.csdn.net/WenRoudeni/article/details/119681550

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

实现方式使用的是：vue-seamless-scroll

相关文档参考地址：vue-seamless-scroll

代码：

<div style="height: 204px; width: 200px">
                <vue-seamless-scroll
                  :data="dataList"
                  :class-option="classOption"
                style="width: 100%;height: 214px;overflow: hidden;">
                  <ul style="list-style: none;display: block">
                    <li style="list-style: none;"
                        v-for="(item,index) in dataList"
                        :key="index">
                      <div style="margin-top: 30px">
                            <span style="font-family: PingFangSC-Light, PingFang SC;font-size:14px;color: #FFFFFF;line-height: 13px">
                                {{item.timestamp}}</span><br>
                                           <span style="color:#60FFDE;font-family: PingFangSC-Light, PingFang SC;font-size: 
                                {{item.content}}</span>
                        </div>
                      </div>
                    </li>
                  </ul>
                </vue-seamless-scroll>
              </div>

相关数据配置：

dataList: [
        {
          content: '2021年东京奥运会',
          timestamp: '2021-07-23',
        }, {
          content: '2021年东京奥运会',
          timestamp: '2021-07-23',
        }, {
          content: '2021年东京奥运会',
          timestamp: '2021-07-23',
        },
        {
          content: '2021年东京奥运会',
          timestamp: '2021-07-23',
        }, {
          content: '2021年东京奥运会',
          timestamp: '2021-07-23',
        }, {
          content: '2021年东京奥运会',
          timestamp: '2021-07-23',
        }],

      classOption: {
          step: 1, // 数值越大速度滚动越快
          limitMoveNum: 6, // 开始无缝滚动的数据量 this.dataList.length
          hoverStop: false, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime: 0, // 单步运动停止的时间(默认值1000ms)
          autoPlay: true
      }