zoukankan      html  css  js  c++  java
  • js上拉加载

    <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;
    }
  • 相关阅读:
    face-morpher过程函数分析
    python,在路径中引用变量的方法
    【django学习】request.POST与request.POST.get两者主要区别
    微信小程序wx.uploadFile的两个坑
    python PIL/cv2/base64相互转换
    OpenCV-Python cv2.imdecode()和cv2.imencode() 图片解码和编码
    cv2.imread()
    详解Ubuntu Server下启动/停止/重启MySQL数据库的三种方式(ubuntu 16.04)
    python使用post请求发送图片并接受图片
    前端 img标签显示 base64格式的 图片
  • 原文地址:https://www.cnblogs.com/shark1100913/p/12002500.html
Copyright © 2011-2022 走看看