js实现列表向上无限滚动


Posted in Javascript onJanuary 13, 2020

本文实例为大家分享了js实现列表向上无限滚动的具体代码,供大家参考,具体内容如下

先来一张效果图

js实现列表向上无限滚动

html

<div class="transdata1">
   <ul class="tody-table-header2">
    <li>商品</li>
    <li>数量(kg)</li>
    <li>单价(元)</li>
    <li>金额(元)</li>
   </ul>
   <div id="detetion-box2">
    <div id="detetion-con1">
     <ul v-for="(item,index) in todayDetetion2" :key="index">
      <li>{{item.name}}</li>
      <li>{{item.amount}}kg</li>
      <li>{{item.price}}元/kg</li>
      <li style="color:rgba(0,255,204,1);">{{item.money}}元</li>
     </ul>
    </div>
    <div id="detetion-con2"></div>
   </div>
</div>

js

getData() {
   var _this = this;
   this.$axios
    .get("请求的url")
    .then(res => {
     this.todayDetetion2 = res.data.data;
     this.$nextTick(() => {
      this.ScrollUp2();
     });
    })
    .catch(err => {});
  },
  ScrollUp2() {
   var box = document.getElementById("detetion-box2");
   var con1 = document.getElementById("detetion-con1");
   var con2 = document.getElementById("detetion-con2");
   this.speed = 50;
   if (con1.offsetHeight >= box.offsetHeight) {
    con2.innerHTML = con1.innerHTML;
    var timer1 = setInterval(scrol, this.speed);
    function scrol() {
     /*判断滚动内容是否已经滚完,滚完了则滚动的值重新设置到0,否则就每个30默秒向上滚动1px */
     if (box.scrollTop >= con1.scrollHeight) {
      box.scrollTop = 0;
     } else {
      box.scrollTop++;
     }
     /*判断滚动的距离刚好为一条公告的高度时停掉定时器,隔1s之后重新启动计时器即可实现公告滚动停留效果 */
     if (box.scrollTop % 25 == 0) {
      clearInterval(timer1);
      setTimeout(() => {
       timer1 = setInterval(scrol, 30);
      }, 2000);
     }
    }
   }
  }

css(样式自己调)

.transdata1 {
 background: url("../../../static/img/transdata_bg.png") no-repeat center/100%
  100%;
 height: 237px;
 padding: 36px 28px 16px 20px;
 box-sizing: border-box;
 transform: translateY(-12px);
}
.tody-table-header2 {
 overflow: hidden;
}

.tody-table-header2 li {
 height: 24px;
 width: 82px;
 line-height: 24px;
 list-style: none;
 float: left;
 font-size: 13px;
 margin-right: 48px;
 font-family: MicrosoftYaHei;
 color: rgba(127, 250, 255, 1);
 text-align: center;
 background: url("../../../static/img/thead_bg.png") no-repeat center/100%;
 background-size: 100% 100%;
}
.tody-table-header2 li:last-child {
 margin-right: 0;
}
#detetion-box2 {
 margin-top: 13px;
 height: 150px;
 overflow: hidden;
}
#detetion-box2 ul {
 overflow: hidden;
 border-bottom: 1px solid #0e579c;
}
#detetion-box2 li {
 width: 82px;
 height: 24px;
 line-height: 24px;
 float: left;
 margin-right: 48px;
 font-size: 12px;
 color: #fff;
}
#detetion-box2 ul li:last-child {
 margin-right: 0;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery用data方法获取某个元素上的事件
Jun 23 Javascript
require.js深入了解 require.js特性介绍
Sep 04 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
Javascript闭包与函数柯里化浅析
Jun 22 Javascript
微信小程序 删除项目工程实现步骤
Nov 10 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
Angular HMR(热模块替换)功能实现方法
Apr 04 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
使用typescript构建Vue应用的实现
Aug 26 Javascript
微信小程序实现pdf、word等格式文件上传的方法
Sep 10 Javascript
Node.js API详解之 repl模块用法实例分析
May 25 Javascript
vue 组件销毁并重置的实现
Jan 13 #Javascript
VUE实现自身整体组件销毁的示例代码
Jan 13 #Javascript
微信小程序聊天功能的示例代码
Jan 13 #Javascript
js实现适配移动端的拖动效果
Jan 13 #Javascript
Vue 嵌套路由使用总结(推荐)
Jan 13 #Javascript
优化Vue中date format的性能详解
Jan 13 #Javascript
JS document文档的简单操作完整示例
Jan 13 #Javascript
You might like
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
PHP实现时间轴函数代码
2011/10/08 PHP
PHP中比较时间大小实例
2014/08/21 PHP
PHP实现查询手机归属地的方法详解
2017/04/28 PHP
Javascript延迟执行实现方法(setTimeout)
2010/12/30 Javascript
js拦截alert对话框另类应用
2013/01/16 Javascript
Javascript获取HTML静态页面参数传递值示例
2013/08/18 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
jQuery实现的自适应焦点图效果完整实例
2016/08/24 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
vue.js中$set与数组更新方法
2018/03/08 Javascript
vue axios请求超时的正确处理方法
2018/04/02 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
[10:21]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster 选手采访
2021/03/11 DOTA
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
用pickle存储Python的原生对象方法
2017/04/28 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
对numpy中的where方法嵌套使用详解
2018/10/31 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
matplotlib 生成的图像中无法显示中文字符的解决方法
2020/06/10 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
python如何编写类似nmap的扫描工具
2020/11/06 Python
Python使用cn2an实现中文数字与阿拉伯数字的相互转换
2021/03/02 Python
介绍下static、final、abstract区别
2015/01/30 面试题
财务工作个人求职的自我评价
2013/12/19 职场文书
会计顶岗实习心得
2014/01/25 职场文书
2014年学生工作总结
2014/11/20 职场文书
表扬稿格式范文
2015/01/16 职场文书
护士业务学习心得体会
2016/01/25 职场文书
2016年“我们的节日·清明节”活动总结
2016/04/01 职场文书