VueJS 列表下拉刷新 自动加载 demo

<template>
<div class="wrapper">
    <div class="toparea clearfix">
      <span class="back" @click="$router.back(-1)">返回</span>
      评论详情
      <span class="fatie" @click="goToFatie">发帖</span>   
    </div>
    <div class="itemblock" v-for="item in listcontent" :key="item.id" >
        <!--id：{{item.id}}--> 
        <p class="nameandtime">{{item.name}}&nbsp;&nbsp;&nbsp;{{item.add_time}}</p>
        <p class="content" v-html="item.text">{{item.text}}</p>
    </div>
    <div>{{loadmsg}}</div>
    <Footer></Footer>
</div>

</template>
<script>
import thisbq from '@/api/bq.js'
import Footer from "../components/Footer.vue";
export default {
  data() {
    return {
      id:this.$route.params.id,
      listcontent: [], //循环数组
      page : 1,      //默认第一页
      pagesize : 10, //每页的条数
      page_total : 0, //总记录条数
      scrollTop:0,//滚动条位置
      clientHeight:0,//可视区高
      scrollHeight:0,//滚动区域
      noMoreData: false,  //是否停止加载 false:不停止  true:停止加载  
      loadmsg: '加载中......'
    }
  },
    created() {
    this.fetchList()
    },
    mounted() {      
        window.addEventListener('scroll', this.bindScroll);
    },
    watch: {  
        //观察滚动条位置
        scrollTop:function(){
            if ((this.scrollHeight-1) <= (this.clientHeight + this.scrollTop)) {
                    if(this.noMoreData) return false;
                    this.fetchList();
            }
        }
    },
   methods: {
     goToFatie(){
      this.$router.push('/Fatie')
    },
     //html encode
    html_encode(str) {
        var s = "";
        if (str.length == 0) return "";
        s = str.replace(/&/g, "&gt;");
        s = s.replace(/</g, "&lt;");
        s = s.replace(/>/g, "&gt;");
        s = s.replace(/ /g, "&nbsp;");
        s = s.replace(/\'/g, "&#39;");
        s = s.replace(/\"/g, "&quot;");
        s = s.replace(/\n/g, "<br>");
        return s;
    },
    //html decode
    html_decode(str) {
        var s = "";
        if (str.length == 0) return "";
        //s = str.replace(/&gt;/g, "&");
        s = str;
        //s = s.replace(/&lt;/g, "<");
        //s = s.replace(/&gt;/g, ">");
        //s = s.replace(/&nbsp;/g, " ");
        //s = s.replace(/&#39;/g, "\'");
        //s = s.replace(/&quot;/g, "\"");
        s = s.replace(/<br>/g, "<br>");
        s = s.replace(/\[br\]/g, "<br>");
        //s = s.replace(/&apos;/g, "\'");
        return s;
    },
    //评论中的URL链接加a链接
    checkHttpUrl(str){
      var regx = /(((http|https):\/\/(www\.)?)|www\.)[^\u0391-\uFFE5\s]*/gi;
      var res = str.match(regx);
      var m = "";
      if(res != null && res.length != 0){
        for(i=0;i<res.length;i++){
          m = res[i];
          if(res[i].indexOf("http://") >= 0){
            m = res[i].substring(7,res[i].length);
          }
          if(res[i].indexOf("https://") >= 0){
            m = res[i].substring(8,res[i].length);
          }
        
          m = "http://"+m;
          str = str.replace(res[i],"<a href='"+m+"' target='_blank'>"+res[i]+"</a>");
        }
      }
      return str;
    },
    //替换语句中的GIF为图片base64方式
    checkBiaoQing(msg){
        if(msg.indexOf("{biaoqing}") >=0 ){
            let bq_arr = msg.match(/\{biaoqing\}(.*?)gif\{\/biaoqing\}/g);
            
            let i=""
            for(i=0;i<bq_arr.length;i++){
                bq_arr[i] = bq_arr[i].replace('{biaoqing}','');
                bq_arr[i] = bq_arr[i].replace('.gif{/biaoqing}','')-1;
                msg=msg.replace(/\{biaoqing\}(.*?)\{\/biaoqing\}/, "<img src=" + thisbq.bq[bq_arr[i]] + ">")
            }
            
            /*msg = msg.replace(/\{biaoqing\}/g,"<img src='"+pri_fix);
            msg = msg.replace(/\.gif\{\/biaoqing\}/g,"' />");*/
        }
        return msg;
    },
    fetchList(){    
      if(this.noMoreData ) return false;     
      this.GLOBAL.postData.set('id', this.id)
      this.GLOBAL.postData.set('page', this.page)
      this.GLOBAL.postData.set('pagesize', this.pagesize) 
      this.page ++;
      //预判是否去请求下一页    
      if(this.page_total > 0) {
        if((this.page * this.pagesize) > this.page_total) {
          this.noMoreData = true;
          this.loadmsg = '我也是有底限的~';                
          return false;
        }
      }       
      this.$ajax
          .post("v1/articles/comment_lists",this.GLOBAL.postData)
          .then(response => {
            this.page_total = response.data.total            
            //返回信息判断
            if(response.data.error_code == 0 && response.data.data) {       
                //新建数据对象并修改，然后将新的数据对象复制与this.comment_lists
                let i
                let comment_lists_old = response.data.data
                for (i = 0; i < response.data.data.length; i++) {
                  comment_lists_old[i]['text'] = this.html_decode(response.data.data[i].text)
                  comment_lists_old[i]['text'] = this.checkBiaoQing(comment_lists_old[i]['text'])
                }
                
                this.listcontent = this.listcontent.concat(comment_lists_old);   
                //this.listcontent = this.listcontent.concat(response.data.data); //追加分页数据
                //判断下一页是否还有数据
                if((this.page * this.pagesize) >= this.page_total) {
                    this.noMoreData = true;
                    this.loadmsg = '我也是有底限的~';
                    return false;
                }
            }
                                  
          })
          .catch(error => {
            console.log(error.message);
          });
    },
    bindScroll(){
        this.scrollTop= document.documentElement.scrollTop;
        this.scrollHeight=document.documentElement.scrollHeight;
        this.clientHeight=document.documentElement.clientHeight;
    }
  },
  components: {
    Footer
  }
};
</script>
<style scoped>
.wrapper{
  margin:10px;
  padding-top:50px;
}
.itemblock{
  margin-bottom: 15px;
  margin-top:0px;
  border-bottom: solid 1px #e4e4e4;
  padding-bottom: 15px;
  
}
.itemblock .nameandtime{
  font-size:14px;
  color:#999;
  margin-bottom: 5px;
}
.itemblock .content{
  font-size:14px;
}
.toparea{
  position:fixed;
  top:0px;
  left:0px;
  right:0px;}
.back{
  position: absolute;
  left:12px;
  font-size: 12px;
}
.fatie{
  position: absolute;
  right:12px;
  font-size: 12px;
}
</style>

如果本文章已帮助到您！