VUE 列表页中实现分页加载(下拉到底部触发下一页 )

VUE 列表页中实现分页加载(下拉到底部触发下一页 )1、HTML结构注:该方法所执行的基础是10条数据的高度总和应大于列表盒子固定高度<ulclass=”my_list”@scroll=”scrollEvent”><liv-for=”(item,index)inmyList”:key=”item.id”></li></ul>2.滚动加载分页方法以及所需变量配置data(){return{isUpdate:true,//是否到底

1、HTML结构

  • 注:该方法所执行的基础是10条数据的高度总和应大于列表盒子固定高度
  <ul class="my_list" @scroll="scrollEvent">
    <li v-for="(item, index) in myList" :key="item.id"></li>
  </ul>

2.滚动加载分页方法以及所需变量配置

  data() {
    return {
      isUpdate: true, // 是否到底-最后一页
      filter: {
        count: 10, // 页大小
        page: 1, // 当前页
        params: {
          status: "0", // 额外传参 
        }
      },
      myList: [], // 列表数据集合
      total: 0, // 一共有多少条数据
    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    // 首次加载 
    loadData() {
      let data = {
        count: this.filter.count, // 页大小
        page: this.filter.page, // 当前页
        params: {
          status: this.filter.params.status
        }
      }
      api.list(data).then(res => {
        if(res.status == 0 && res.data.results.length != 0){
          this.myList= res.data.results;
          this.total = res.data.count;
 		}
      }).catch(() => {
      });
    },
    // 下拉数据更新加载 
    updateData() {
      let data = {
        count: this.filter.count, // 页大小
        page: this.filter.page, // 当前页
        params: {
          status: this.filter.params.status
        }
      }
      api.list(data).then(res => {
        if(res.status == 0 && res.data.results.length != 0){
          var myList = this.myList;
          res.data.results.forEach(function (item){
            myList.push(item);
          })
          this.myList = myList;
          this.total = res.data.count;
        } else {
          this.filter.page -= 1;
          if(res.data.results.length == 0) {
            this.isUpdate = false;
            this.$message.warning("到底了");
          } else {
          this.$message.error("操作失败");
          }
        }
      }).catch(() => {
        this.filter.page -= 1;
          this.$message.error("操作失败");
      });
    },
   // 列表滚动事件
    scrollEvent (e) {
      if ((e.srcElement.offsetHeight + e.srcElement.scrollTop) - e.srcElement.scrollHeight === 0) {
        if(this.isUpdate) {
          this.filter.page += 1;
          this.updateData();
        } else {
            this.$message.warning("到底了");
        }
      }
    },
  }

3.列表样式

  my_list{
    height: 100vh; // 设置固定高度
    overflow: scroll;
    li {
      background-color: #ffffff;
      margin-bottom: 0.20rem;
	}
  }

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/36201.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注