vue-infinite-scroll 和 vue-lazyload 下拉加载图片懒加载

  vue下拉数据无限加载  - vue-infinite-scroll

vue图片懒加载功能  - vue-lazyload

 

css:

#app{
    width: 300px;
    height: 500px;
}
.item{    
    width: 100%;    
    height: 100px;
}
.item img{
    width: 50px;
    height: 50px;
}
.v-infinite-scroll-loading {
    margin-bottom: 30px;
    text-align: center;
}
.v-infinite-scroll-noMore {
    text-align: center;
    color: #9c9c9c;
    margin-bottom: 20px;
    font-size: 14px;
} 

 

html:

 

<div id="app">
    <div class="item" v-for="item in list">
        {{item.name}}
        <img v-lazy="item.src">
    </div>
    <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
          <div v-show="loadingShow" class="v-infinite-scroll-loading">
              <img src="images/loading.gif" alt="">
              <span>加载中</span></div>
           <div v-show="noMore" class="v-infinite-scroll-noMore">
                没有更多
           </div>
     </div>
 </div>

使用一个简单的 vue  循环功能实现下拉加载

 v-lazy="item.src"  为图片懒加载

json:

// lists.json
{
  "list": [
    {
      "id": "001",
      "name": "天蓝色平纹混纺织物"
    },
    {
      "id": "002",
      "name": "天空灰平纹混纺织物"
    },
    {
      "id": "003",
      "name": "藏青色平纹混纺织物"
    },
    {
      "id": "004",
      "name": "深黑色平纹混纺织物"
    },
    {
      "id": "005",
      "name": "藏青色平纹混纺织物"
    },
    {
      "id": "006",
      "name": "天蓝色平纹混纺织物"
    }
  ],
  "totalList":'6'
}

js:

//图片懒加载配置
 Vue.use(VueLazyload, {
        //  preLoad: 10,
        error: 'images/404.png',
        loading: 'images/loading.gif',
        attempt: 3
    });

//创建vue实例
var vm = new Vue({
        el: '#app',
        data: {
            list:[],
            busy: true,
            loadingShow: false,   //加载中
            noMore: false,        //没有更多数据
            pageSize: 10,     //页条数
            page: 0,           //页数
            totalPage: null,     //总页数
        },
        mounted: function () {
            this.$nextTick(function () {
                this.busy = false;
            });
        },
        methods: {
            // vue-infinite-scroll  和 vue-lazyload 
            // 实现下拉无限加载数据 图片懒加载 更新数据
            getProductList: function () {
                let _this = this;
                let param = {   //接口参数
                    page: this.page,
                    pageSize: this.pageSize
                };
                
                // vue-resource   lists.json为模拟数据
                _this.$http.get('lists.json', {params: param}).then(function (res) {
                    if (!_this.totalPage) {
                        _this.totalPage = Math.ceil(res.data.totalList / _this.lists);
                        _this.productList = _this.productList.concat(res.data.lists);
                        _this.busy = false;
                    } else {

                        if (_this.page > _this.totalPage) {
                            _this.busy = true;
                            _this.noMore = true;
                            _this.loadingShow = false
                        } else {
                            _this.productList = _this.productList.concat(res.data.rows);
                            _this.busy = false;
                        }
                    }

                }, function (res) {
                    // 响应错误回调
                    console.log("错误");
                    console.log(res);
                });
            },
            loadMore: function () {
                var _this = this;
                this.page++;
                this.busy = true;
                this.loadingShow = true;
                setTimeout(function () {
                    _this.getProductList();
                    _this.loadingShow = false
                }, 500);

            }
        }
    });

js文件

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/vue-resource.js"></script>
<script type="text/javascript" src="js/vue-infinite-scroll.js"></script>
<script type="text/javascript" src="js/vue-lazyload.js"></script>

 

vue-infinite-scroll  - 参数

参数	描述
infinite-scroll-disabled	如果该属性的值为true，则将禁用无限滚动。
infinite-scroll-distance	数字(默认值= 0)——在执行v -infinite- scroll方法之前，元素底部和viewport底部之间的最小距离。
infinite-scroll-immediate-check	布尔值(默认值= true)表示该指令应该在绑定后立即检查。如果可能，内容不够高，不足以填满可滚动的容器。
infinite-scroll-listen-for-event	当事件在Vue实例中发出时，无限滚动将再次检查。
infinite-scroll-throttle-delay	下次检查和这次检查之间的间隔(默认值= 200)