@tanzhenxing/zx-list-ad v1.0.1

zx-list-ad 广告列表项组件

一个基于 uni-app、Vue3 语法开发的高兼容性广告列表项组件，适配 H5、小程序、App。可嵌入于 zx-list 组件中，支持多端广告展示，便于灵活插入广告内容。

✨ 组件特性

• 支持多端（H5、App、各类小程序）
• 可插入 zx-list 作为广告项
• 支持多种广告参数配置
• 事件丰富，便于扩展
• 不依赖浏览器特有 DOM
• 使用 Vue3 语法

📦 属性（Props）

🧲 事件（Events）

🧩 插槽（Slots）

• 默认插槽：无

🛠️ 平台兼容性

• H5
• App（iOS/Android）
• 微信/支付宝/百度/抖音/QQ/快手等主流小程序（需平台支持广告组件）

🚀 基础用法

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

<script setup>
import zxList from '@/components/zx-list/zx-list.vue'
import zxListAd from '@/components/zx-list-ad/zx-list-ad.vue'
const list = [
  { id: 1, title: '内容1' },
  { id: 2, title: '内容2' }
]
</script>

🎯 事件用法

<zx-list-ad adpid="1111111111" @error="onAdError" @close="onAdClose" />
<script setup>
function onAdError(e) {
  // 处理广告加载失败
}
function onAdClose(e) {
  // 处理广告关闭
}
</script>

💡 注意事项

• 需在支持广告组件的平台使用，部分平台需配置广告位ID。
• 建议配合 zx-list 组件使用，便于统一列表风格。
• 组件已使用 语法，推荐配合 Vue3/uni-app3 项目使用。

如需更复杂的广告样式，建议配合自定义插槽或样式扩展。