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 相关文章推荐
Array对象方法参考
Oct 03 Javascript
JavaScript 版本自动生成文章摘要
Jul 23 Javascript
jQuery中get和post方法传值测试及注意事项
Aug 08 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
使用jquery实现仿百度自动补全特效
Jul 23 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
Javascript使用uploadify来实现多文件上传
Nov 16 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
vue点击input弹出带搜索键盘并监听该元素的方法
Aug 25 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
Sep 04 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 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 在5.1.* 和5.2.*之间 PDO数据库操作中的不同之处小结
2012/03/07 PHP
php file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
php接口和抽象类使用示例详解
2014/03/02 PHP
PHP使用自定义方法实现数组合并示例
2016/07/07 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
2014/08/27 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
angularjs封装$http为factory的方法
2017/05/18 Javascript
JS使用正则表达式验证身份证号码
2017/06/23 Javascript
js编写简单的计时器功能
2017/07/15 Javascript
Node.js 基础教程之全局对象
2017/08/06 Javascript
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
js中Generator函数的深入讲解
2019/04/07 Javascript
通过实例讲解JS如何防抖动
2019/06/15 Javascript
koa2的中间件功能及应用示例
2020/03/05 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
redis之django-redis的简单缓存使用
2018/06/07 Python
python实现扫描ip地址的小程序
2019/04/16 Python
pandas条件组合筛选和按范围筛选的示例代码
2019/08/26 Python
pytorch 修改预训练model实例
2020/01/18 Python
Tensorflow 1.0之后模型文件、权重数值的读取方式
2020/02/12 Python
Django框架models使用group by详解
2020/03/11 Python
Python3爬虫里关于代理的设置总结
2020/07/30 Python
英国领先的独立酒精饮料零售商:DrinkSupermarket
2021/01/13 全球购物
Java Servlet API中forward() 与redirect()的区别
2014/04/20 面试题
医药销售求职信范文
2014/02/01 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
2014年质量管理工作总结
2014/12/01 职场文书
明确岗位职责
2015/02/14 职场文书
学风建设主题班会
2015/08/17 职场文书
德生TECSUN S-2000使用手册文字版
2022/05/10 无线电
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android
MySQL生成千万测试数据以及遇到的问题
2022/08/05 MySQL