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 相关文章推荐
字符串的replace方法应用浅析
Dec 06 Javascript
js中window.open()的所有参数详细解析
Jan 09 Javascript
简单的ajax连接库分享(不用jquery的ajax)
Jan 19 Javascript
Javascript无参数和有参数类继承问题解决方法
Mar 02 Javascript
Json解析的方法小结
Jun 22 Javascript
浅析$(function) ready和onload 的区别
Sep 03 Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 Javascript
jQuery对table表格进行增删改查
Dec 22 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
May 08 Javascript
详解webpack4升级指南以及从webpack3.x迁移
Jun 12 Javascript
vue router 通过路由来实现切换头部标题功能
Apr 24 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 19 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
mysql From_unixtime及UNIX_TIMESTAMP及DATE_FORMAT日期函数
2010/03/21 PHP
php通过两层过滤获取留言内容的方法
2016/07/11 PHP
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
jQuery选中select控件 无法设置selected的解决方法
2010/09/01 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
jquery实现当滑动到一定位置时固定效果
2014/06/17 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
微信小程序分享海报生成的实现方法
2018/12/10 Javascript
js中对象和面向对象与Json介绍
2019/01/21 Javascript
javascript function(函数类型)使用与注意事项小结
2019/06/10 Javascript
JS实现电脑虚拟键盘打字测试
2020/06/24 Javascript
Vue如何基于vue-i18n实现多国语言兼容
2020/07/17 Javascript
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
Python爬取数据并写入MySQL数据库的实例
2018/06/21 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
python通过matplotlib生成复合饼图
2020/02/06 Python
python3注册全局热键的实现
2020/03/22 Python
理解Django 中Call Stack机制的小Demo
2020/09/01 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
英国女装网上商店:I Saw It First
2018/10/18 全球购物
网络事业创业计划书范文
2014/01/09 职场文书
寒假思想汇报
2014/01/10 职场文书
幼儿园开学家长寄语
2014/01/19 职场文书
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
2014年节能减排工作总结
2014/12/06 职场文书
2014年机关后勤工作总结
2014/12/16 职场文书
党员考试作弊检讨书1000字
2015/02/16 职场文书
小学同学聚会感言
2015/07/30 职场文书
党员观看《筑梦中国》心得体会
2016/01/18 职场文书
python爬虫--selenium模块
2021/03/31 Python
Python IO文件管理的具体使用
2022/03/20 Python
Golang 实现WebSockets
2022/04/24 Golang