vue向上无限滚动

最新推荐文章于 2024-06-20 11:00:33 发布

IF YOU～

最新推荐文章于 2024-06-20 11:00:33 发布

阅读量581

点赞数

分类专栏： vue项目文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_43278947/article/details/126885779

版权

vue项目专栏收录该内容

23 篇文章 0 订阅

订阅专栏

效果
在这里插入图片描述
代码：

 <div class="work-publicity" >
            <vue-seamless-scroll  :data="workList"  :class-option="optionHover" class="seamless-warp" 
            v-if="workList.length">
                <div v-for="(item, index) in workList" :key="index" class="item-chunk" >
                  <div>用户 {{ item.createdBy }} 办理 {{item.procedureTypeName}} </div>
                  <div>{{ item.date }}</div>
                </div>
            </vue-seamless-scroll>
          <el-empty  v-else description="暂无数据"></el-empty>

          </div>

css

    .work-publicity {
      width: 100%;
      height: 440px;
      background: #FFFFFF;
      box-shadow: 0px 15px 15px 0px rgba(61,61,61,0.8000);
      border-radius: 10px;
      padding: 32px 34px 28px 49px;
      .seamless-warp{
        margin-top: 10px;
        width: 100%;
        height: 350px;
        overflow: hidden;
      }
      .item-chunk {
        width: 100%;
        line-height: 36px;
        border-bottom:  1px dashed #AFAFAF; 
        color: #333;
        display: flex;
        justify-content: space-between;
        div {
          &:last-child {
            color: #999;
          }
        }
      }
    }
   computed: {
      optionHover() {
		 return {
		   step: 0.3, // 数值越大速度滚动越快
		   limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
		   hoverStop: true, // 是否开启鼠标悬停stop
		   direction: 1, // 0向下 1向上 2向左 3向右
		   openWatch: true, // 开启数据实时监控刷新dom
		   singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
		   singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
		   waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
		   
		 };
	   }
    },