Cook-uni

外观

List 列表 ​

列表组件集成了下拉刷新、上拉加载、空数据，在APP端使用原生的list组件具有内存回收机制，建议所有页面不管是否使用列表，都使用该组件进行包装。

注意

该组件的子组件只能是c-list-item、c-list-header组件。

平台 ​

App小程序H5
√√√

属性 ​

属性名类型默认值说明平台
downObject详细配置见下下拉刷新配置All
upObject详细配置见下上拉加载更多配置All
emptyPropsObject{}空状态配置All
emptyPositionStringbottom空状态位置
top:顶部
bottom:底部
none:不显示		All
firstLoadPositionStringtop首次加载的loading位置
top:顶部
bottom:底部
none:不显示		All
cClassString,Array,Objectnull组件类All
cStyleString,Array,Objectnull组件样式All
marginString,Number,Arraynull外边距All
paddingString,Number,Arraynull内边距All
bgColorStringnull背景色，支持c-bg-开头的背景色类All

down下拉刷新详细：

{
  use: false,
  offset: '45px',// 下拉触发距离
  refreshBgColor: null, // 下拉刷新时的背景色
  // 下拉状态为outOffset时的颜色
  outOffsetTextColor:null,
  outOffsetIndicatorColor:null,
  beforeEndDelay: 800, // 调用endSuccess或endError后延迟多久关闭刷新框
  // 下拉时指示器的样式
  // true和loadMore.loadingIndicatorProps一致，false不显示
  indicatorProps:true,
  // 参考c-load-more组件的props
  loadMore:{
      indicatorPosition:'left',
      indicatorGutter:'10rpx',
      loadMoreText: '下拉刷新',
      noMoreText: "释放更新",
      loadingText: "正在刷新",
      successText: {
          text:"刷新成功",
          color:'c-t-success'
      },
      errorText: {
          text:"刷新失败",
          color:'c-t-danger'
      },
      successIcon:'success',
      errorIcon:'error',
  }
}

up上拉加载更多详细：

{
    use: false,
    auto: true, // 自动加载第一项
    offset: '100px', // 距离底部触发距离
    pageSize: 10,
    noMoreSize: 5, // 避免列表数据过少(比如只有一条数据),显示无更多数据会不好看。其值必须<=upOption.pageSize的值
    // 参考c-load-more组件的props
    loadMore:{
      height:'80rpx',
      indicatorPosition:'left',
      indicatorGutter:'10rpx',
      loadMoreText: '上拉加载更多',
      loadingText: '正在加载...',
      noMoreText: '-- 没有更多了 --',
      errorIcon:'refresh',
      errorText: {
      text:"加载失败，点击重试",
        color:'c-t-danger'
    },
    errorBgColor:'c-bg-danger-light-8',
  },
  pageType:'pageSize', //判断是否有分页的类型：pageSize总页数，dataSize 总数据，hasPage 是否有下一页
}

事件 ​

事件名说明
onReady列表准备完成时
pullingUp上拉加载更多触发
page当前分页数
pullingDownStart开始下拉刷新
pullingDown下拉刷新触发
scroll滚动时触发 {scrollTop}

插槽 ​

插槽名说明
lowest在列表容器顶部
firstLoading首次loading插槽，可配合骨架屏组件使用，需要c-list-item组件
before顶部插槽，需要c-list-item组件
default内容插槽
after底部插槽，需要c-list-item组件
empty空数据插槽，props值type=error|empty

方法 ​

名称说明
endSuccess(currentDataSize = 1, pageTypeValue)加载状态设为成功
currentDataSize当前页服务端返回的数据数
currentDataSize属性需要根据upOption.pageType值判断传递
endError(error = null)加载状态设为失败
error错误信息，可以是字符串，对象或错误对象
resetUpScroll(showLoading = true,callback)重置页面为初始状态
showLoading是否显示loading
callback操作成功的回调
scrollTo(uniqueClassName,options = {})滚动到指定位置
c-list-item组件的uniqueClassName唯一类名，等于“backTop”时返回到顶部
options的参数{offset:'偏移',animated:'是否动画'}
downLock禁用下拉刷新

示例 ​

vue
<template>
    <c-page>
      <c-list ref="list" :down="{use:true}" @pullingDown="loadData(1)" :up="listUpOption" @pullingUp="loadData">
        <c-list-item>
          
        </c-list-item>
      </c-list>
    </c-page>
</template>
<script setup>
import {ref} from 'vue'

const list = ref(null);
const listUpOption = {
  use: true,
  auto:true,
  pageSize: 10,
  noMoreSize: 5,
}
const dataList = ref([]);
function loadData(page){
  uni.$c.api.testApi({
    pageIndex:page,
    pageSize:listUpOption.pageSize
  }).then(res=>{
    if(page === 1){
      dataList.value = res.list;
    }else{
      dataList.value = [...dataList.value,...res.list];
    }
    list.value.endSuccess(res.list.length,res.totalPageSize)
  }).catch(err=>{
    list.value.endError(err);
  })
}
</script>