2020-10-20

最新推荐文章于 2024-09-22 11:17:00 发布

元希

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量155

点赞数

文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_51617148/article/details/109184055

版权

js上拉加载（vue）

<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 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: {  
	return(){
	          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;
                    });
                }
            };
        }

公共方法：

//滚动条在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;
}