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 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
Oct 11 Javascript
intro.js 页面引导简单用法 分享
Aug 06 Javascript
浅析Js中的单引号与双引号问题
Nov 06 Javascript
js判断checkbox是否选中个数的方法(超简单)
Aug 19 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
Jan 13 Javascript
深入理解javascript的getTime()方法
Feb 16 Javascript
浅谈gulp创建完整的项目流程
Dec 20 Javascript
vue代理和跨域问题的解决
Jul 18 Javascript
详解如何写出一个利于扩展的vue路由配置
May 16 Javascript
vue.js实现回到顶部动画效果
Jul 31 Javascript
js模拟F11页面全屏显示
Sep 17 Javascript
vue cli3适配所有端方案的实现
Apr 13 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 遍历文件实现代码
2011/05/04 PHP
功能强大的PHP POST提交数据类
2016/07/15 PHP
JS中window.open全屏命令解析及使用示例
2013/12/11 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
JS实现队列与堆栈的方法
2016/04/21 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
2016/07/20 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
vue2组件实现懒加载浅析
2017/03/29 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
重学JS之显示强制类型转换详解
2019/06/30 Javascript
nodejs对mongodb数据库的增加修删该查实例代码
2020/01/05 NodeJs
[04:38]完美世界携手游戏风云打造 卡尔工作室饰品系统篇
2013/04/25 DOTA
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
怎么使用pipenv管理你的python项目
2018/03/12 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
python小程序实现刷票功能详解
2019/07/17 Python
python opencv实现证件照换底功能
2019/08/19 Python
CSS3 圆角效果
2009/07/15 HTML / CSS
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
C++面试题目
2013/06/25 面试题
学生个人自我鉴定
2014/03/26 职场文书
百日安全活动总结
2014/05/04 职场文书
主要负责人任命书
2014/06/06 职场文书
法院授权委托书范文
2014/08/02 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
大学优秀学生主要事迹材料
2015/11/04 职场文书
学习党史心得体会2016
2016/01/23 职场文书
2016年社区党支部公开承诺书
2016/03/25 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server
浅谈Redis中的RDB快照
2021/06/29 Redis