coolui-scroller

Appearance

当前文档uni-app 版coolui-scroller-uni 改用 原生微信小程序版 →

Loadmore 加载更多组件 ​

<coolui-scroller-loadmore> 展示上拉加载的状态与文案，放在 coolui-scroller 的 loadmore 插槽里。

对应原生微信小程序版：Loadmore 加载更多组件

代码演示 ​

vue
<template>
  <coolui-scroller :isEmpty="isEmpty" @refresh="refresh" @loadmore="loadmore">
    <coolui-scroller-item v-for="(item, index) in list" :key="index">
      <view class="item">{{ item.title }}</view>
    </coolui-scroller-item>

    <template #loadmore>
      <coolui-scroller-loadmore
        :status="loadMoreSetting.status"
        :loading="loadMoreSetting.loading"
        :more="loadMoreSetting.more"
        :noMore="loadMoreSetting.noMore"
      />
    </template>
  </coolui-scroller>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const isEmpty = ref(false)
const list = ref<{ title: string }[]>([])

const loadMoreSetting = ref({
  status: 'more', // more | loading | noMore
  loading: { text: '加载中', color: '#999999' },
  more: { text: '查看更多', color: '#333333' },
  noMore: { text: '没有更多', color: '#999999' },
})

function refresh() {
  loadMoreSetting.value.status = 'loading'
  // 刷新完成后改为 'more'（还有数据）或 'noMore'（没有更多）
  return Promise.resolve()
}

function loadmore() {
  loadMoreSetting.value.status = 'loading'
  // 加载完成后改为 'more'（还有数据）或 'noMore'（没有更多）
  return Promise.resolve()
}
</script>
vue
<template>
  <coolui-scroller :isEmpty="isEmpty" @refresh="refresh" @loadmore="loadmore">
    <coolui-scroller-item v-for="(item, index) in list" :key="index">
      <view class="item">{{ item.title }}</view>
    </coolui-scroller-item>

    <template #loadmore>
      <coolui-scroller-loadmore
        :status="loadMoreSetting.status"
        :loading="loadMoreSetting.loading"
        :more="loadMoreSetting.more"
        :noMore="loadMoreSetting.noMore"
      />
    </template>
  </coolui-scroller>
</template>

<script>
export default {
  data() {
    return {
      isEmpty: false,
      list: [],
      loadMoreSetting: {
        status: 'more', // more | loading | noMore
        loading: { text: '加载中', color: '#999999' },
        more: { text: '查看更多', color: '#333333' },
        noMore: { text: '没有更多', color: '#999999' },
      },
    }
  },
  methods: {
    refresh() {
      this.loadMoreSetting.status = 'loading'
      // 刷新完成后改为 'more'（还有数据）或 'noMore'（没有更多）
      return Promise.resolve()
    },
    loadmore() {
      this.loadMoreSetting.status = 'loading'
      // 加载完成后改为 'more'（还有数据）或 'noMore'（没有更多）
      return Promise.resolve()
    },
  },
}
</script>

属性 ​

属性说明类型默认值
status当前状态：more / loading / noMoreString'more'
loading加载中状态的文字与颜色Object{ text: '加载中', color: '#999999' }
more可上拉状态的文字与颜色Object{ text: '查看更多', color: '#333333' }
noMore没有更多状态的文字与颜色Object{ text: '没有更多', color: '#999999' }
color兼容字段String'#999999'
shake兼容字段Booleanfalse

与原生版的差异 ​

  • 原生还有一个 noMoreTextStyle 属性，uni-app 版已移除，直接用 noMore.text / noMore.color 即可；
  • 其余属性完全一致。

相关 ​