feat:下拉加载数据

张含笑

2026-01-09 6e89ca6f644c7347dedf852652614ce8c81ac94a

feat:下拉加载数据

 uniapps/work-app/src/pages/voiceCall/index.vue

@@ -6,7 +6,7 @@
    </div>

    <!-- 联系人列表 -->
    <div class="contactList">
    <div class="contactList" @scrolltolower="onScrollToLower">
      <div
        class="contactItem"
        v-for="(contact, index) in contacts"
@@ -31,6 +31,12 @@
        </div>

      </div>

      <!-- 加载提示 -->
      <div class="loadingMore">
        <text v-if="loading">加载中...</text>
        <text v-else-if="!hasMore && contacts.length > 0">没有更多数据了</text>
      </div>
    </div>
  </div>
</template>
@@ -48,17 +54,40 @@
  size: 10,
  searchKeyword:''
})

// 加载状态
const loading = ref(false)
const hasMore = ref(true)

// 获取通讯录
const getPhoneBookList = () => {
  if (loading.value || !hasMore.value) return

  loading.value = true
  // 添加分页参数
  const params = {
    current: defaultParam.value.current,
    size: defaultParam.value.size
    size: defaultParam.value.size,
    searchKeyword: defaultParam.value.searchKeyword
  }

  getPhoneBookListApi(params).then(res => {
    const response = res.data.data
    console.log('通讯录',  response)
    contacts.value = response.records

    if (defaultParam.value.current === 1) {
      contacts.value = response.records
    } else {
      contacts.value = [...contacts.value, ...response.records]
    }

    // 判断是否还有更多数据
    if (response.records.length < defaultParam.value.size || response.current >= response.pages) {
      hasMore.value = false
    } else {
      hasMore.value = true
    }

  }).catch(err => {
    console.error('获取通讯录失败:', err)
    const errorMsg = err.msg || err.message || '获取通讯录失败'
@@ -67,9 +96,18 @@
      icon: 'none',
      duration: 3000
    })
  }).finally(() => {
    loading.value = false
  })
}

// 加载更多
const loadMore = () => {
  if (loading.value || !hasMore.value) return

  defaultParam.value.current++
  getPhoneBookList()
}

// 拨打电话方法
const makeCall = (contact) => {
@@ -81,9 +119,18 @@
    icon: 'none'
  })
}

onShow(() => {
  // 重置分页参数
  defaultParam.value.current = 1
  hasMore.value = true
  getPhoneBookList()
});

// 监听滚动到底部
const onScrollToLower = () => {
  loadMore()
}
</script>

<style scoped lang="scss">
@@ -177,4 +224,12 @@
  height: 60rpx;

}
  .loadingMore {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80rpx;
    font-size: 28rpx;
    color: #999;
  }
</style>