thorui中tuiLoadmore如何使用

ThorUI是一个轻量级的前端组件库，其中的`tui-loadmore`模块用于实现滚动加载更多内容的功能，常用于分页显示数据。以下是使用步骤：

1. **安装依赖**：
如果你已经在项目中引入了ThorUI，可以直接使用。如果没有，你可以通过npm或CDN引入`tui-loadmore.min.js`文件。

npm install @thorui/loadmore --save

或在HTML中添加CDN链接：

<script src="https://cdn.jsdelivr.net/npm/@thorui/loadmore@latest/dist/tui-loadmore.min.js"></script>

2. **初始化组件**：
在需要应用滚动加载的容器上创建`TuiLoadmore`实例，并设置必要的配置。例如，你可以设置触发加载的阈值、回调函数等。

const loadmore = new TuiLoadmore({
  element: document.getElementById('loadmore-container'), // 要加载更多的元素
  moreText: '加载更多', // 加载更多按钮的文字
  lessText: '已无更多', // 没有更多数据时的提示文字
  loadingText: '正在加载...', // 加载过程中的提示文字
  hasMore: true, // 初始是否还有更多数据，默认true
  showLoader: true, // 是否显示加载指示器，默认true
});

3. **事件监听**：
可以通过`loadmore.load`事件处理加载更多数据，通常这会发送Ajax请求到服务器获取新的数据。

loadmore.on('load', function() {
  // 发送AJAX请求获取更多数据
  fetch('your-api-url', { /* your options */ })
    .then(response => response.json())
    .then(data => loadmore.appendData(data)); // 将新数据添加到loadmore组件
});

4. **结束加载**：
当不再有更多数据时，可以调用`loadmore.end()`来停止加载并更改提示文本。

if (noMoreItems) {
  loadmore.end();
}