图片懒加载

HTML部分

<template>
  <div class="contaner" v-touch:up="eventFunUp('first')">
    <van-pull-refresh v-model="isLoading"  success-text="刷新成功" @refresh="onRefresh" >
      <!-- 无数据时显示 -->
      <div class="defaultImg" v-if="defaultImg">
        <img :src="imgSrc+'mbDefault.png'"   alt="">
      </div>
      <!-- 图片内容部分 -->
      <div class="img_arrTwo" v-if="!defaultImg">
        <div class="img_img"  v-for="(item,index) in imgarry" :key="index">
          <img :src="item.image" @click="handlePreview(item)">
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

js部分

<script>
import { PullRefresh } from 'vant';   //引入vant框架下拉刷新
export default {
  components: {
    [PullRefresh.name]:PullRefresh,
  },
  data() {
    return {
      defaultImg:false,//缺省显示
      isLoading: false,//下拉刷新
      imgSrc: this.https.httpImgsrcCom,//图片公共路径
      imgarry:[],
      id:'',
      title:'',
      page: 1 //  上拉翻页加载
    }
  },
  created(){
    this.id = this.$route.query.id
    this.title = this.$route.query.title
  },
  mounted(){
    this.getInit(this.page)
  },
  methods: {
    //下拉刷新
    onRefresh() {
      setTimeout(() => {
        this.getInit()
        this.isLoading = false;
      }, 500);
    },
    eventFunUp(data) {
      let _this = this;
      return function(event, start, end) {
        if (_this.page == false) {
          return _this.$toast.center("新作敬请期待~");
        } else {
          _this.getInit(_this.page);
        }
      };
    },
     // 请求数据
    getInit (page) {
      let parmers = {
        style:this.id,
        page: page ? page : "1"
      }
      this.$loading("loading...");
      this.$post('/invitation/Newinvitation/getTypeTemplate',parmers)
        .then((res) => {
          this.$loading.close();
          // this.imgarry = res.data.template;
          if (JSON.stringify(res.data.template) != "[]") {
            this.imgarry = this.imgarry.concat(res.data.template);
            this.page++;
          }
          if(JSON.stringify(this.imgarry)!="[]"){
            this.defaultImg=false
          }else{
            this.defaultImg=true
          }
          if(res.code==202){
             this.defaultImg=true
          }
        }).catch(err => {
            console.log(err)
        })
    },
    handlePreview(item){
      this.$router.push({
        path: item.path,
        query: { mb_id: item.id, edit: false }
      });
    }
  }
};
</script>

css部分

<style lang="less" scoped>
.contaner {
  width: 100vw;
  height: 100vh;
  /*  缺省 */
  .defaultImg{
    position: absolute;
    left:50% ;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 450px;
    height: 450px;
    img{
      width: 100%;
      height: 100%;
    }
  }
   .img_arrTwo{
      width: 100%;
      height: 100%;
      padding: 14px;
      display: flex;
      padding:  20px 34px 0 34px;
      display: flex;
      justify-content:space-between;
      flex-wrap: wrap;
      position: relative;
      .img_img{
        width:329px;
        height: auto;
        margin-bottom: 20px;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
}
</style>