更新记录

1.0.0（2022-07-26） 下载此版本

• 上传插件

平台兼容性

ljy-list

• list 组件，item 没有固定格式，可以自定义
• 支持当 list 内容不足以产生滚动条时，自动请求下一页数据

基本用法

<template>
  <view>
    <ljy-list custom-class="list-box" :loading="isLoading" :finished="isFinished" @load="handleLoadData">
      <view class="list-item" v-for="item in list" :key="item">{{item}}</view>
    </ljy-list>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue'

  const list = ref([])
  const isLoading = ref(false)
  const isFinished = ref(false)

  function handleLoadData() {
    isLoading.value = true
    setTimeout(() => {
      for (let i = 0; i < 10; i++) {
        list.value.push(list.value.length + 1)
      }
      isLoading.value = false
      if (list.value.length >= 50) {
        isFinished.value = true
      }
    }, 2000)
  }
</script>

<style lang="scss">
  .list-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    background-color: #fff;

    &:not(:first-of-type) {
      margin-top: 1px;
    }
  }
</style>

API

Props

Events