上拉加载的实现↓

                <ul>
                    <li class='list' v-for='(i,index) in list'>
                        <div ref='left'>
                            <div>
                                <p>{{i.title}}</p>
                                <p><span>{{i.user_name}}</span><span>{{i.time}}</span></p>
                            </div>
                            <img :src="i.img_url" alt="" @touchstart='touchStart' @touchmove='touchMove(index)' />
                        </div>
                        <span class='pingbi' @click='pingbi(index)'>屏蔽</span>
                    </li>
                </ul>
                <div class="noneData" :class="{loding:isActive8}">{{noData}}</div>

 

哈喽，博客园的朋友们大家好，我叫和尚（^_^ 高中时同学们给我起的名字  所以呢  所以呢 所以呢  大家以后也可以这样叫我的(#^.^#)） 我步入前端这个行呢也不是太久，起步阶段呢，遇到了一上拉加载的功能，自己感觉特别好奇，特别想弄会他，自己呢没有实践操作过，一直感觉特别的难，今天终于手动做了一遍，突然感觉并不是很难的，现在就给大家分享一下吧，请看下面代码  ┏ (゜ω゜)=☞

以上代码呢，是建立vue的基础上来做的一个demo，让我们继续看js的写法↓

new Vue({
        el: '#app',
        data() {
            return {
                list: []，
                page: 1,
                token: getUrlData()[1],//这个东西是前端封装的接口
                group_id: getUrlData()[0],//这个东西是前端封装的接口
                isActive8: false,//这个是上拉加载的loading动态图
                noData: ''//显示加载中如果没有数据就是暂无数据
            }
        },
        mounted() {
            this.getData()//初始页面的时候加载这个方法

              var _this=this;
              $(window).scroll(function () {
                  var scrollTop=$(this).scrollTop()//获取元素滚动条的垂直位置
                  var srollHeight=$(document).height()//获取整个文档的高度
                  var windowHeight=$(this).height()//当前可见区域的大小

                  //下面判断这块我没搞明白，但是就是可以实现效果，如果有朋友了解的话，请留言，Thanks♪(･ω･)ﾉ
                  if(scrollTop+windowHeight===srollHeight){
                        _this.infinite()  
                   }
                })

        },
        methods: {
            getData: function() {var _this = this;                         //重写this，不让到了另一个作用域会出现this指向问题
                var data = {                             //data是向后台传的参数
                    group_id: _this.group_id,
                    token: _this.token,
                    page: _this.page                   //向后台发送page页面，获取数据
                }
                AXIOS.post("" + root1 + "/dynamic/groupDynamicList", data,
                    function(res) {if(_this.page != 1) {         
                            let listArr = _this.list;  
                            listArr.push.apply(listArr, res.data.list)  //如果大于1就获取page++每一页的数据 第一页的数据listArr使用push添加并apply继承合并
                            _this.list = listArr;
                        } else {
                            _this.list = res.data.list;   //如果等于1就正常获取第一页的数据
                        }
                        if(res.data.list === 0 || res.data.list <= 2) {
                            _this.noData = '暂无更多数据'  
                            _this. isActive8=false;  //删除loding 类
                        } else {
                            _this.noData = '正在加载中'
                            _this. isActive8=true; //添加loding 类
                        }
                        console.log(_this.list)
                    }
                )
            },//上拉加载
            infinite: function() {
                let self = this;
                    setTimeout(function() {

                    self.page++   //page加一次并发送给后台

                    self.getData() //每1.5秒请求一个数据
                 }, 1500) 
             },
         }
      }

最后附上两个类  noneData  和  loading 的代码：

.loding{
    background: url("../img/loding.gif") no-repeat 34%;
    background-size: 0.6rem 0.6rem;
    height: 1rem;
    line-height: 1rem;
}


.noneData{
    text-align: center;
    /*margin-bottom: 0.4rem;*/
    width: 100%;
    line-height: 0.8rem;
}