H5 vue 移动端 下拉刷新加载数据 （对象数组合并去重 ）_h5 下拉加载

npm install vue-infinite-scroll --save

2. 在main.js 引入

import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)

<template>
  <div id="app">
    <div class="authorization_box" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading"
           infinite-scroll-distance="10">
           <!-- 循环数据列表 -->
              <div class="list" v-for="(item,index) in datalist" :key="index">
                  <div>{{item}}</div>
              </div>
              <!-- 展示“正在加载、已无数据、加载失败” -->
              <div class="l-load">{{ loadTxt[loadKey] }}</div>
          </div>
  </div>
 
</template>
<script type="text/javascript">
  export default{
    name: 'App4',
    components: {
 
    },
    data() {
            return {
                page: 1,//当前页
                total: 0,//总数据数量
                pageSize: 10,//每页几个
                loadTxt: {
                    more: "正在加载...",
                    none: "没有更多了~",
                    err: "加载失败~"
                },
                loadKey: "none",
                datalist: [],//数据列表
                loading: false,
                dataMax:0
            };
        },
        mounted() {
            this.getData();//一进入页面就调用获取数据的方法
        },
        methods: {
           getData() {
      console.log(this.queryParams, 'queryParams+++')
      this.queryParams.pageNum = this.page
      this.queryParams.pageSize = this.pageSize
      getListbr(this.queryParams, this.token).then(res => {
        const Arr = []
        if (res.status === 200 && res.data.list.length > 0) {
          this.nodata = false
          this.total = res.data.total
          console.log(this.total, 'this.total111')
          // this.loading = true
           this.loadKey = 'more'
          res.data.list.forEach(item => {
            Arr.push({
              time: item.startTime.substring(5, 11),
              starTime: item.startTime.substring(11),
              endTime: item.endTime.substring(11),
              totalSleepTime: formatSeconds(item.totalSleepTime),
              sbdNumbers: item.sbdNumbers,
              heartbeatRate: item.heartbeatRate,
              id: item.id
 
            })
            console.log(JSON.stringify(this.dataList), '****new dataList')
            this.dataListNew = Arr
            //这里要把每次差的每页的数据 放到一个数组 这里用的是数组合并去重
            const newArr = this.dataListNew.concat(Arr)
 
            for (const item1 of newArr) { // 循环json数组对象的内容
              let flag = true // 建立标记，判断数据是否重复，true为不重复
 
              for (const item2 of this.dataList) { // 循环新数组的内容
                if (item1.id === item2.id) { // 让json数组对象的内容与新数组的内容作比较，相同的话，改变标记为false
                  flag = false
                }
              }
 
              if (flag) { // 判断是否重复
                this.dataList.push(item1) // 不重复的放入新数组。  新数组的内容会继续进行上边的循环。
              }
            }
          })
 
          console.log(this.dataList, 'datalist')
          if (this.total <= this.dataList.length) { // 这里我假设数据加载完了
            this.loadKey = 'none'
            this.loading = true
          }
        } else {
          this.nodata = true
        }
      })
    },
    loadMore() {
      console.log('进入loadMore 要在手机上才有效果')
      const page = this.page
      const size = this.pageSize
      const total = this.total
      const length = this.dataList.length
      const num = page * size
      console.log(this.total, 'this.total')
      console.log(this.dataList, 'datalist')
      console.log(this.dataList.length, 'this.datalist.length')
      if (num < total && num === length) {
        console.log('loadMore......1111')
        ++this.page
        console.log(this.page, '多少页++++++？')
        this.getData()
      }
    },
        }
  }
</script>
 
<style media="screen">
.authorization_box {
      width: 100%;
      background-color: #f6f6f6;
      padding: 0.5rem 1rem 1rem;
  }
  .list{
      width: 100%;
      height: 2.5rem;
      border: 1px solid #ccc;
      margin-bottom: 0.5rem;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .l-load {
      text-align: center;
      font-size: 0.625rem;
      color: #aaa;
      margin-top: 1rem;
  }
</style>