文档章节

js上拉加载

o
 osc_zoa3moe9
发布于 2019/12/07 17:07
字数 292
阅读 8
收藏 0

精选30+云产品,助力企业轻松上云!>>>

<ul class="u-f-log">
        <li class="u-f-log-alone" v-for="item in log">
            <div class="u-f-log-alone-info">
                <div class="iconfont icon-dingdan1"></div>
                <!--<div v-if="item.type==2" class="iconfont icon-wode"></div>-->
                <!--<div v-if="item.type==3" class="iconfont icon-fenxiang3"></div>-->
                <div class="u-f-log-alone-info-text">
                    <div>{{item.remarks}}</div>
                    <div>{{item.active_time}}</div>
                </div>
            </div>
            <div class="u-f-log-alone-price">+{{item.yongjin}}</div>
        </li>
        <li class="public-none" v-if="loading_over">~已经没有数据了~</li>
    </ul>
data: {           
            log:[],
            page: 1,
            is_loading:false,
            loading_over:false,
            is_search: false,
            init_search_list: true

        }
methods: {
getFanli: function(callback){
                var that = this;
                var layload
                layer.ready(function(){
                    layload =layer.load();
                });
                that.$http.post("{:url('api/user/getMyFanli')}",{"_ajax": "1","page": that.page,token:localStorage.getItem('token'),"limit":14}, {emulateJSON: true}).then(function (res) {
                    console.log(res);
                    that.yue = res.data.data.money;
                    that.leiji = res.data.data.taotal_fanli;
                    that.dai = res.data.data.daifanli;
                    layer.close(layload);
                    if(that.page===1){
                        that.log = res.data.data.list;
                    }else{
                        for(var i in res.data.data.list){
                            that.log.push(res.data.data.list[i]);
                        }
                    }
                    that.page++;
                    that.$nextTick(function() {
                        if(res.data.data.list.length == 0) {
                            that.loading_over = true;
                        }
                        callback()
                    })
                }, function (err) {
                    console.log(JSON.stringify(err));
                });
            }
}
 mounted: function() {
            var that = this;
            that.getFanli(function(){});
            window.onscroll = function(){
                if(parseInt((getScrollTop() + getWindowHeight() + 100)) >= getScrollHeight()){
                    //此时滚动条已经下拉到底部啦
                    if(that.is_loading) {
                        return false;
                    }
                    if(that.loading_over) {
                        return false;
                    }
                    that.is_loading = true;
                    that.getFanli(function() {
                        that.is_loading = false;
                    });
                }
            };
        }

js公共方法:

//滚动条在Y轴上的滚动距离
function getScrollTop(){
  var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
  if(document.body){
    bodyScrollTop = document.body.scrollTop;
  }
  if(document.documentElement){
    documentScrollTop = document.documentElement.scrollTop;
  }
  scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
  return scrollTop;
}
//文档的总高度
function getScrollHeight(){
  var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
  if(document.body){
    bodyScrollHeight = document.body.scrollHeight;
  }
  if(document.documentElement){
    documentScrollHeight = document.documentElement.scrollHeight;
  }
  scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
  return scrollHeight;
}

//浏览器视口的高度
function getWindowHeight(){
  var windowHeight = 0;
  if(document.compatMode == "CSS1Compat"){
    windowHeight = document.documentElement.clientHeight;
  }else{
    windowHeight = document.body.clientHeight;
  }
  return windowHeight;
}

 

o
粉丝 1
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
iOS WKWebView UI增强(上拉刷新,JS交互,加载进度条)

iOS WKWebView UI增强(上拉刷新,JS交互,加载进度条) 需求:WKWebView的一些增加模块,例如上拉刷新,JS交互,加载进度条等等持续更新 阅读前提: } catch(error) { } } (void)headerRefres...

__小___东邪___
2018/11/06
0
0
WEB前端性能优化基本套路

前言 前端性能优化这是一个老生常谈的话题,但是还是有很多人没有真正的重视起来,或者说还没有产生这种意识。 当用户打开页面,首屏加载速度越慢,流失用户的概率就越大,在体验产品的时候性...

32氪
2017/07/31
0
0
ReactNative是怎么在iOS上跑起来的

ReactNative是怎么在iOS上跑起来的 本文所有观点并不权威,都是平时看文档和实践中概括的,可能有错的地方,如有发现麻烦指出谢谢。 初始化流程: 创建根Controller:RCTRootView 创建桥接对象...

osc_8gq03rku
2019/02/25
2
0
wepy小程序实现列表分页上拉加载(2)

第一篇:wepy小程序实现列表分页上拉加载(1) 本文接着上一篇内容: 4.优化-添加加载动画 (1)首先写加载动画的结构和样式 打开list.wpy文件 template结构代码: <template><view class="l...

osc_s3ds9mww
2019/01/28
1
0
下拉刷新和上拉加载 js 框架 - mescroll

mescroll 精致的下拉刷新和上拉加载 js框架。支持vue,完美运行于移动端和主流PC浏览器 (JS framework for pull-refresh and pull-up-loading)。 原生js, 支持vue, 不依赖jquery,zepto 一套代...

mescroll
2017/08/22
2.4K
0

没有更多内容

加载失败,请刷新页面

加载更多

如何获取NuGet以安装/更新packages.config中的所有软件包?

问题: I have a solution with multiple projects in it. 我有一个包含多个项目的解决方案。 Most of the third party references are missing, yet there are packages.config file for e......

fyin1314
21分钟前
17
0
Xcode中的版本与版本 - Version vs build in Xcode

问题: I have an app that I developed with Xcode 3 and recently started editing with Xcode 4. In the target summary I have the iOS application target form with fields: identifie......

javail
51分钟前
14
0
如何在Python中将字典键作为列表返回? - How to return dictionary keys as a list in Python?

问题: In Python 2.7 , I could get dictionary keys , values , or items as a list: 在Python 2.7中 ,我可以将字典键 , 值或项作为列表获取: >>> newdict = {1:0, 2:0, 3:0}>>> newd......

技术盛宴
今天
17
0
2020世界人工智能大会开幕首日 百度与浦发银行达成战略合作

本文作者:y****n 7月9日,2020世界人工智能大会开幕首日,百度与浦发银行签署战略合作协议,将在人工智能、金融科技等多个领域进一步深化合作。双方将优势互补,实现人工智能技术在金融领域...

百度开发者中心
昨天
26
0
Java中C ++ Pair 的等价物是什么? - What is the equivalent of the C++ Pair in Java?

问题: Is there a good reason why there is no Pair<L,R> in Java? 有没有一个很好的理由说明Java中没有Pair<L,R> ? What would be the equivalent of this C++ construct? 这个C ++构造的......

富含淀粉
今天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部