mint-ui Infinite scroll的使用说明+实例

<template>

<div class="myFeedBackPage">

<HeaderBack :headerTitle="headertit" :txtColor="txtColor"/>

<ul class="feedBackList" v-infinite-scroll="loadMore"

        infinite-scroll-disabled="loading"

        infinite-scroll-distance="10">

  <li class="feedBackItem" v-for="(item , index) in feedBackList" :key="index">

       <div class="feedBackAsk">

         <img src="~img/myFeedBack/ask.png" alt="">

         <p>{{item.opinion}}</p>

         <span>{{item.createTime}}</span>

       </div>

       <div class="feedBackAnswer">

         <img src="~img/myFeedBack/answer.png" alt="">

         <p>{{item.feedback}}</p>

         <span>{{item.confirmTime}}</span>

       </div>

    </li>        

</ul>

    <p class="loadingTemp" v-show="loadingImg"><img class="" src="~img/myFeedBack/loading.gif" alt=""></p>

    <p v-if='loadingDom' class='loading'>没有更多数据</p>

</div>

</template>

 

<script>

import qs from 'qs'

import HeaderBack from '@/components/common/HeaderBack.vue'

export default {

components: {

HeaderBack

},

data() {

return {

headertit: '我的反馈',

txtColor: '#262626',

remnant: 0,

        desc: "",

        feedBackList: [],

        current: 1,

        pageSize: 10,

        loadingImg: true,

        loading: true, //为true时不会触发加载更多，false可以触发

  loadingDom: false,

  pages: 0

}

},

created() {

      this.getFeedBackList();

      // console.log(this.getFeedBackList());

    },

    mounted() {

    

    },

methods: {

  getFeedBackList: function () {

        const _this = this;

        this.$post('url',{

        current: _this.current,

        pageSize: _this.pageSize,

        userId: localStorage.getItem('userId')

}).then((res) => {

this.pages = res.page.pages//总页数

  //当请求没有数据时需要显示的内容，需要注意的是如果上一次正好将数据请求完

//这次请求的数据Data会为[],就会执行里面的代码，加上this.feedBackList.length == 0这个限制条件就不会了

          // console.log(res.data.list);

          if (res.data.list.length == 0 && this.feedBackList.length == 0) {

              this.loading = true;

              this.loadingImg = false;

} else {

            //有数据并且请求到的数据等于pageSize说明数据库还有多余数据

if (res.data.list.length === parseInt(this.pageSize)) {

                for (var i = 0; i < this.pageSize; i++) {

                  this.feedBackList.push(res.data.list[i]);

                }

this.loading = false;

} else {

//有数据但是数据库数据已经被请求完，没有其他数据

this.loading = true;

                this.loadingDom = true;

                this.loadingImg = false;

for (var i = 0; i < res.data.list.length; i++) {

this.feedBackList.push(res.data.list[i]);

}

}

//数据正好请求完，由于前面加了this.feedBackList.length == 0限制，会走当前逻辑

if (res.data.list.length == 0 || res.data.list.length == 9) {

this.loading = true;

                this.loadingDom = true;

                

}

          }

}).catch(e => console.log(e))

      },

      loadMore() {

        this.loading = true;

        this.current++;

        if(this.current > this.pages){

          this.loading = false

          this.loadingImg = false

          this.loadingDom = true

        }else{

          this.loadingImg = true

          this.getFeedBackList();

        }

      }

}

}

</script>

 

<style lang="scss" scoped>

.myFeedBackPage{

padding-top: 0.88rem;

.feedBackList{

  .feedBackItem{

    background:rgba(255,255,255,1);

    margin-bottom: 0.15rem;

    .feedBackAsk{

       border-bottom: 0.01rem solid #F1F0ED;

       padding: 0.15rem 0.38rem

    }

     .feedBackAnswer{

       padding: 0.15rem 0.38rem

     }

     img{

       width: 0.25rem;

       height: 0.25rem;

       display: block;

       margin-bottom: 0.1rem;

     }

     p{

       font-size: 0.26rem;

       line-height: 0.33rem;

       color:rgba(64,74,76,1);

       margin-bottom: 0.2rem;

     }

     span{

       height:0.15rem;

          font-size:0.18rem;

          color:rgba(133,134,151,1);

          line-height:0.33rem;

     }

  }

}

    .loading{

      text-align: center;

    }

    .loadingTemp{

      text-align: center;

      img{

        height: 0.8rem;

      }

    }

}

 

</style>