zx-list 通用列表组件

一个基于 uni-app、Vue3 <script setup> 语法开发的高兼容性列表容器组件，适配 H5、小程序、App。支持插槽、常用属性、事件，适合自定义各类列表场景。

✨ 组件特性

• 支持多端（H5、App、各类小程序）
• 支持插槽自定义内容
• 支持边框、滚动、反向渲染等常用属性
• 事件丰富，便于扩展
• 不依赖浏览器特有 DOM
• 使用 Vue3 <script setup> 语法，类型推断友好

📦 属性（Props）

🧩 插槽（Slots）

• 默认插槽：列表内容，可自定义任意结构

🧲 事件（Events）

🛠️ 平台兼容性

• H5
• App（iOS/Android）
• 微信/支付宝/百度/抖音/QQ/快手等主流小程序

🚀 基础用法

<template>
  <zx-list>
    <view v-for="item in list" :key="item.id">{{ item.title }}</view>
  </zx-list>
</template>

<script setup>
import { ref } from 'vue'
import zxList from '@/components/zx-list/zx-list.vue'

const list = ref([
  { id: 1, title: '列表项1' },
  { id: 2, title: '列表项2' }
])
</script>

🌈 插槽自定义内容

<zx-list>
  <view class="item">
    <image src="..." />
    <text>标题</text>
    <text class="right">更多</text>
  </view>
</zx-list>

🎯 事件用法

<zx-list @scroll="onScroll" @scrolltolower="onToLower">
  <view v-for="item in list" :key="item.id">{{ item.title }}</view>
</zx-list>

<script setup>
function onScroll(e) {
  // 处理滚动事件
}
function onToLower(e) {
  // 处理滚动到底部事件
}
</script>

🧪 进阶用法

反向渲染

<zx-list :renderReverse="true">
  <view v-for="item in list" :key="item.id">{{ item.title }}</view>
</zx-list>

显示/隐藏边框

<zx-list :border="false">
  <view v-for="item in list" :key="item.id">{{ item.title }}</view>
</zx-list>

开启回到顶部（nvue有效）

<zx-list :enableBackToTop="true">
  <view v-for="item in list" :key="item.id">{{ item.title }}</view>
</zx-list>

💡 注意事项

• 组件已使用 <script setup> 语法，推荐配合 Vue3/uni-app3 项目使用。
• nvue 平台下部分属性/事件才生效，详见 uni-app 官方文档。
• 建议列表项内容使用插槽灵活自定义。

📚 参考文档

• uni-list 官方文档

如需更复杂的列表项样式，建议配合自定义子组件或插槽实现。