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 validation插件表单验证的一个例子
Mar 03 Javascript
JavaScript window.document的属性、方法和事件小结
Oct 24 Javascript
用jquery统计子菜单的条数示例代码
Oct 18 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
jquery实现触发时更新下拉列表内容的方法
Dec 02 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
Angular JS 生成动态二维码的方法
Feb 23 Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
微信小程序使用request网络请求操作实例
Dec 15 Javascript
vue elementUI tree树形控件获取父节点ID的实例
Sep 12 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
Jun 03 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
《魔兽争霸3:重制版》更新 多项视觉效果调整
2020/05/04 魔兽争霸
php ci框架中加载css和js文件失败的解决方法
2014/03/03 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
php编写的一个E-mail验证类
2015/03/25 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
用php+ajax新建流程(请假、进货、出货等)
2017/06/11 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
浅谈laravel aliases别名的原理
2019/10/24 PHP
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
2010/11/30 Javascript
jquery调用wcf并展示出数据的方法
2011/07/07 Javascript
浅析XMLHttpRequest的缓存问题
2013/12/13 Javascript
使用js如何实现全选与全不选
2013/12/30 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
Bootstrap实现省市区三级联动(亲测可用)
2019/07/26 Javascript
vue实现PC端分辨率适配操作
2020/08/03 Javascript
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
python网络编程学习笔记(八):XML生成与解析(DOM、ElementTree)
2014/06/09 Python
python对文件目录的操作方法实例总结
2019/06/24 Python
python装饰器常见使用方法分析
2019/06/26 Python
python同步两个文件夹下的内容
2019/08/29 Python
解决安装pyqt5之后无法打开spyder的问题
2019/12/13 Python
基于Pycharm加载多个项目过程图解
2020/01/19 Python
工作的心得体会
2013/12/31 职场文书
25岁生日感言
2014/01/13 职场文书
高一政治教学反思
2014/01/28 职场文书
红旗方阵解说词
2014/02/12 职场文书
司机工作自我鉴定
2014/09/19 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书
2015中秋节晚会主持词
2015/07/01 职场文书
python中print格式化输出的问题
2021/04/16 Python
go语言-在mac下brew升级golang
2021/04/25 Golang