清哥的小屋

1
<van-pull-refresh
2
  v-model="refreshing"
3
  @refresh="onRefresh"
4
>
5
  <van-list
6
    v-model="loading"
7
    :finished="finished"
8
    :finished-text="finishedText"
9
    @load="pullupLoadMore"
10
    :immediate-check="false"
11
    :error.sync="error"
12
    error-text="请求失败，点击重新加载"
13
  >
14
    <ul
15
      v-for="(item,id) in allHouseDetail"
16
      :key="id"
17
    >
18
      <li @click="chooseRoom(item.roomAddress,item)">{{ item.roomAddress }}</li>
19
    </ul>
20
  </van-list>
21
</van-pull-refresh>

1
 data () {
2
    return {
3
      allHouseDetail: [], // 所有房屋数据
4
      loading: false, // 是否处在加载状态
5
      finished: false, // 是否完成加载
6
      finishedText: '', // 加载完毕文本提示
7
      page: 1, // 当前页码
8
      page_size: 100, // 每页多少条
9
      total: 0, // 总条数
10
      error: false, // 错误提示
11
    refreshing: false, // 下拉刷新
12
    };
13
  },
14
methods: {
15
  getHouseDetail () {
16
  this.communityId = JSON.parse(localStorage.getItem('areaDetail')).areaId
17
  this.areaName = JSON.parse(localStorage.getItem('areaDetail')).areaName
18
  this.$http({
19
    method: 'post',
20
    url: '你的请求路径',
21
    data: {
22
      communityId: this.communityId,
23
      page: this.page,
24
      limit: this.page_size
25
    }
26
  }).then(res => {
27
try {
28
  if (res.returnCode == 10001) {
29
    if (this.refreshing) { // 下拉刷新
30
      this.allHouseDetail = [];
31
      this.refreshing = false;
32
    }
33
    if (this.page == 1) {
34
      this.loading = false
35
      this.allHouseDetail = res.data
36
      this.total = res.total;
37
    } else {
38
      this.loading = false
39
      this.allHouseDetail = this.allHouseDetail.concat(res.data)
40
      this.total = res.total;
41
    }
42
    if (res.data.length == 0) {
43
      this.finished = true;
44
      this.finishedText = '暂无数据';
45
    } else if (res.data.length < this.page_size) {
46
      this.finished = true;
47
      this.finishedText = '没有更多啦';
48
    }
49
  } else {
50
    Toast.fail(res.returnMsg);
51
  }
52
} catch {
53
  this.error = true;
54
  }
55
  })
56
},
57
pullupLoadMore () { // 上拉加载更多
58
  this.page++;
59
  this.getHouseDetail();
60
},
61
onRefresh () { // 下拉刷新
62
  this.finished = false;
63
  this.loading = true;
64
  this.refreshing = true
65
  this.page = 1
66
  this.getHouseDetail();
67
},
68
}