chore(视频号组件): 更新文档及注释内容

2026-01-10 17:38:13 +08:00
parent 13166132c7
commit 68bc853dff
3 changed files with 417 additions and 68 deletions
--- a/components-diy/diy-channel-list.vue
+++ b/components-diy/diy-channel-list.vue
@@ -1,8 +1,37 @@
 <template>
 	<view :style="[componentStyle, { '--row-count': value.rowCount }]">
+		<!-- 轮播模式 -->
+		<swiper v-if="value.carousel && value.carousel.type != 'hide'" 
+			:indicator-dots="isIndicatorDots"
+			:autoplay="value.carousel.autoplay || false"
+			:interval="value.carousel.interval || 3000"
+			:duration="value.carousel.duration || 500"
+			:circular="value.carousel.circular || false"
+			:style="swiperHeight"
+			class="channel-swiper">
+			<swiper-item v-for="(slide, slideIndex) in swiperSlides" :key="slideIndex">
+				<view class="swiper-slide-content">
+					<view v-for="(item, index) in slide" :key="index" :class="['channel-item', value.mode]">
+						<!-- 视频号视频卡片，轮播模式 -->
+						<diy-channel-video 
+							:value="item" 
+							@video-play="playVideo(item)"
+							:list-mode="true"
+							:video-height="value.rowCount === 3 ? 180 : 240"
+							:title-line-clamp="value.titleLineClamp"
+							:show-play-btn="value.showPlayBtn"
+							:cover-style="value.coverStyle"
+							:play-btn-style="value.playBtnStyle"
+						/>
+					</view>
+				</view>
+			</swiper-item>
+		</swiper>
+
 		<!-- 固定布局模式 -->
-		<view v-if="value.showStyle == 'fixed'" :class="['channel-list', 'row1-of' + value.rowCount]">
+		<view v-else-if="value.showStyle == 'fixed'" :class="['channel-list', 'row1-of' + value.rowCount]">
 			<view v-for="(item, index) in value.list" :key="index" class="channel-item">
+				<!-- 视频号视频卡片，列表模式 -->
 				<diy-channel-video 
 					:value="item" 
 					@video-play="playVideo(item)" 
@@ -16,11 +45,12 @@
 			</view>
 		</view>

-		<!-- 其他布局模式 -->
+		<!-- 其他布局模式（如滚动布局） -->
 		<scroll-view v-else :class="['channel-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle]"
 			:scroll-x="value.showStyle == 'singleSlide'">
 			<view class="uni-scroll-view-content">
 				<view v-for="(item, index) in value.list" :key="index" :class="['channel-nav-item', value.mode]">
+					<!-- 视频号视频卡片，滚动模式 -->
 					<diy-channel-video 
 						:value="item" 
 						@video-play="playVideo(item)"
@@ -38,15 +68,15 @@
 </template>

 <script>
-
-import DiyMinx from './minx.js'
-import { wechatChannelUtil, wechatChannelConfig } from './js/wechat-channel.js'
-
 /**
 * 微信视频号列表组件
 * 支持多种布局模式，包括固定布局和滚动布局
 * 可配置列数、视频高度、标题行数等属性
+ * 用于在页面中展示多个微信视频号视频
 */
+import DiyMinx from './minx.js'
+import { wechatChannelUtil, wechatChannelConfig } from './js/wechat-channel.js'
+
 export default {
 	name: 'diy-channel-list',
 	props: {
@@ -58,7 +88,7 @@ export default {
 			 * @property {number} rowCount - 每行显示的视频数量
 			 * @property {Array} list - 视频列表数据
 			 * @property {string} componentBgColor - 组件背景色
-		 * @property {string} componentAngle - 组件圆角类型
+			 * @property {string} componentAngle - 组件圆角类型，可选值：round
 			 * @property {number} topAroundRadius - 顶部圆角半径
 			 * @property {number} bottomAroundRadius - 底部圆角半径
 			 * @property {Object} ornament - 装饰效果配置
@@ -66,6 +96,15 @@ export default {
 			 * @property {boolean} showPlayBtn - 是否显示播放按钮
 			 * @property {Object} coverStyle - 视频封面图样式
 			 * @property {Object} playBtnStyle - 播放按钮样式
+			 * @property {string} mode - 显示模式
+			 * @property {number} imageSize - 图片尺寸（仅在特定模式下使用）
+			 * @property {number} pageCount - 每页显示的视频数量
+			 * @property {Object} carousel - 轮播配置
+			 * @property {string} carousel.type - 轮播类型，可选值：default, hide
+			 * @property {boolean} carousel.autoplay - 是否自动播放，默认false
+			 * @property {number} carousel.interval - 自动播放间隔，默认3000ms
+			 * @property {number} carousel.duration - 切换动画时长，默认500ms
+			 * @property {boolean} carousel.circular - 是否循环播放，默认false
 		 */
 		value: {
 			type: Object,
@@ -75,31 +114,40 @@ export default {
 	mixins: [DiyMinx],
 	data() {
 		return {
-			pageWidth: '',
-			indicatorDots: false,
-			swiperCurrent: 0
+			pageWidth: '', // 页面宽度
+			indicatorDots: false, // 是否显示轮播指示器
+			swiperCurrent: 0 // 当前轮播索引
 		}
 	},
 	created() {
 		// 组件创建时的逻辑
+		// 可以在这里进行初始化操作，如获取页面宽度等
 	},
 	watch: {
+		/**
+		 * 组件刷新监听
+		 * 当组件需要刷新时触发
+		 * @param {*} newValue - 新值
+		 */
 		componentRefresh(newValue) {
 			// 监听组件刷新
+			// 可以在这里处理组件刷新时的逻辑
 		}
 	},
 	computed: {
 		/**
 		 * 组件样式
-		 * 根据配置动态生成样式字符串
-		 * @returns {string}
+		 * 根据配置动态生成样式字符串，包括背景色、圆角、阴影和边框
+		 * @returns {string} 样式字符串
 		 */
 		componentStyle() {
 			let style = '';
+			// 背景色
 			if (this.value?.componentBgColor) {
 				style += 'background-color:' + this.value?.componentBgColor + ';';
 			}

+			// 圆角样式
 			if (this.value?.componentAngle == 'round') {
 				style += 'border-top-left-radius:' + (2 * this.value?.topAroundRadius) + 'rpx;';
 				style += 'border-top-right-radius:' + (2 * this.value?.topAroundRadius) + 'rpx;';
@@ -107,7 +155,9 @@ export default {
 				style += 'border-bottom-right-radius:' + (2 * this.value?.bottomAroundRadius) + 'rpx;';
 			}

+			// 装饰效果：阴影
 			style += 'box-shadow:' + (this.value?.ornament?.type == 'shadow' ? '0 0 10rpx ' + this.value?.ornament?.color : '') + ';';
+			// 装饰效果：边框
 			style += 'border:' + (this.value?.ornament?.type == 'stroke' ? '2rpx solid ' + this.value?.ornament?.color : '') + ';';

 			return style;
@@ -116,11 +166,12 @@ export default {
 		/**
 		 * 轮播高度
 		 * 根据模式和配置计算轮播高度
-		 * @returns {string}
+		 * @returns {string} 轮播高度样式
 		 */
 		swiperHeight() {
 			let height = 0;

+			// 根据不同模式计算高度
 			if (this.value?.mode == 'graphic') {
 				height = (49 + this.value?.imageSize) * this.value?.pageCount;
 			} else if (this.value?.mode == 'img') {
@@ -135,11 +186,30 @@ export default {
 		/**
 		 * 是否显示指示器
 		 * 根据轮播配置和列表长度判断是否显示指示器
-		 * @returns {boolean}
+		 * @returns {boolean} 是否显示指示器
 		 */
 		isIndicatorDots() {
+			// 当轮播类型不是隐藏，且视频数量超过一页时显示指示器
 			return this.value?.carousel?.type != 'hide' &&
 				1 != Math.ceil(this.value?.list?.length / (this.value?.pageCount * this.value?.rowCount));
+		},
+
+		/**
+		 * 轮播幻灯片数据
+		 * 将视频列表分割成轮播所需的幻灯片数据
+		 * @returns {Array} 轮播幻灯片数据
+		 */
+		swiperSlides() {
+			const slides = [];
+			const list = this.value?.list || [];
+			const pageSize = (this.value?.pageCount || 1) * (this.value?.rowCount || 1);
+
+			// 将列表数据分割成每页显示的数量
+			for (let i = 0; i < list.length; i += pageSize) {
+				slides.push(list.slice(i, i + pageSize));
+			}
+
+			return slides;
 		}
 	},
 	methods: {
@@ -150,10 +220,13 @@ export default {
 		 */
 		async playVideo(item) {
 			await this.__$emitEvent({
-				eventName: 'video-play', data: item, promiseCallback: async (event, handler, awaitedResult) => {
+				eventName: 'video-play', 
+				data: item, 
+				promiseCallback: async (event, handler, awaitedResult) => {
 					if (!awaitedResult) return;
 					try {
 						// #ifdef MP-WEIXIN
+						// 在微信小程序环境中调用视频播放接口
 						await wechatChannelUtil.playVideo(item);
 						// #endif
 					} catch (err) {
@@ -284,13 +357,55 @@ export default {
 	flex-direction: column;
 }

+/**
+ * 轮播样式
+ * 支持轮播模式的布局和样式
+ */
+.channel-swiper {
+	width: 100%;
+	box-sizing: border-box;
+
+	.swiper-slide-content {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 16rpx;
+		padding: 16rpx;
+		box-sizing: border-box;
+
+		.channel-item {
+			flex: 0 0 calc(33.3333333% - 10rpx);
+			box-sizing: border-box;
+
+			&:nth-child(3n) {
+				margin-right: 0;
+			}
+		}
+
+		// 轮播模式下的 2 列布局
+		&.row1-of2 {
+			.channel-item {
+				flex: 0 0 calc(50% - 8rpx);
+
+				&:nth-child(3n) {
+					margin-right: 16rpx;
+				}
+
+				&:nth-child(2n) {
+					margin-right: 0;
+				}
+			}
+		}
+	}
+}
+
 /**
 * 响应式调整
 * 在小屏幕设备上调整布局和间距
 */
@media (max-width: 375px) {
 	.channel-list,
-	.channel-nav {
+	.channel-nav,
+	.channel-swiper .swiper-slide-content {
 		gap: 12rpx;
 		padding: 12rpx;

--- a/components-diy/diy-channel.vue
+++ b/components-diy/diy-channel.vue
@@ -1,34 +1,70 @@
 <template>
 	<view class="diy-wechat-channel" :style="channelWarpCss">
+		<!-- 视频号头部，显示视频号名称、头像等信息 -->
 		<diy-channel-header :value="value" @header-tap="handlerClick" />
+		<!-- 视频号视频，显示视频封面、标题等信息 -->
 		<diy-channel-video :value="value" @video-play="playVideo" />
 	</view>
 </template>


 <script>
-// 微信视频号组件
+/**
+ * 微信视频号组件
+ * 用于展示单个微信视频号的完整信息，包括头部信息和视频内容
+ * 支持点击头部进入视频号主页，点击视频播放视频
+ */
 import DiyMinx from './minx.js'
-
 import { wechatChannelUtil } from './js/wechat-channel.js'

 export default {
 	name: 'diy-channel',
 	props: {
+		/**
+		 * 视频号数据对象
+		 * @type {Object}
+		 * @required
+		 * @property {string} channelName - 视频号名称
+		 * @property {string} avatarUrl - 视频号头像URL
+		 * @property {string} videoTitle - 视频标题
+		 * @property {string} coverUrl - 视频封面URL
+		 * @property {string} feedId - 视频号内容ID，用于播放视频
+		 * @property {number} viewCount - 视频观看次数
+		 * @property {boolean} showFollow - 是否显示关注按钮
+		 * @property {string} componentAngle - 组件圆角类型，可选值：round
+		 * @property {number} topAroundRadius - 顶部圆角半径
+		 * @property {number} bottomAroundRadius - 底部圆角半径
+		 * @property {boolean} embedMode - 是否启用嵌入式播放
+		 * @property {boolean} showViewCount - 是否显示观看次数
+		 * @property {string} finderUserName - 视频号ID
+		 * @property {string} feedToken - 视频token，用于嵌入式播放
+		 */
 		value: {
-			type: Object
+			type: Object,
+			required: true
 		}
 	},
 	data() {
 		return {};
 	},
-	created() { },
+	created() { 
+		// 组件创建时的初始化逻辑
+	},
 	mixins: [DiyMinx],
 	watch: {
-		// 组件刷新监听
+		/**
+		 * 组件刷新监听
+		 * 当组件需要刷新时触发
+		 * @param {*} nval - 新值
+		 */
 		componentRefresh: function (nval) { }
 	},
 	computed: {
+		/**
+		 * 组件容器样式
+		 * 根据配置动态生成样式字符串，主要处理圆角样式
+		 * @returns {string} 样式字符串
+		 */
 		channelWarpCss: function () {
 			var obj = '';
 			if (this.value.componentAngle == 'round') {
@@ -41,16 +77,28 @@ export default {
 		}
 	},
 	methods: {
+		/**
+		 * 处理头部点击事件
+		 * 触发 channel-tap 事件，用于跳转到视频号主页
+		 */
 		async handlerClick() {
 			await this.__$emitEvent({
-				eventName: 'channel-tap', data: this.value, promiseCallback: (event, handler, awaitedResult) => {
+				eventName: 'channel-tap', 
+				data: this.value, 
+				promiseCallback: (event, handler, awaitedResult) => {
 					if (!awaitedResult) return;
 				}
 			})
 		},
+		/**
+		 * 处理视频播放事件
+		 * 触发 video-play 事件，并在微信小程序中调用视频播放接口
+		 */
 		async playVideo() {
 			await this.__$emitEvent({
-				eventName: 'video-play', data: this.value, promiseCallback: async (event, handler, awaitedResult) => {
+				eventName: 'video-play', 
+				data: this.value, 
+				promiseCallback: async (event, handler, awaitedResult) => {
 					if (!awaitedResult) return;
 					try {
 						// #ifdef MP-WEIXIN
--- a/docs/WECHAT_CHANNEL_INTEGRATION.md
+++ b/docs/WECHAT_CHANNEL_INTEGRATION.md
@@ -102,12 +102,73 @@

 ## 3. 组件使用

-### 3.1 单个视频号组件 (diy-wechat-channel.vue)
+### 3.1 视频号头部组件 (diy-channel-header.vue)

 #### 基本用法

 ```vue
-<diy-wechat-channel :value="channelData" />
+<diy-channel-header :value="headerData" @header-tap="handlerHeaderClick" />
+```
+
+#### 属性说明
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| channelName | String | "" | 视频号名称 |
+| avatarUrl | String | "" | 视频号头像URL |
+| showFollow | Boolean | false | 是否显示关注按钮 |
+
+#### 事件说明
+
+| 事件名 | 说明 | 参数 |
+|--------|------|------|
+| header-tap | 点击头部区域时触发 | 视频号数据对象 |
+
+### 3.2 视频号视频卡片组件 (diy-channel-video.vue)
+
+#### 基本用法
+
+```vue
+<diy-channel-video :value="videoData" @video-play="handlerVideoPlay" />
+```
+
+#### 属性说明
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| value | Object | {} | 视频数据对象 |
+| listMode | Boolean | false | 是否为列表模式 |
+| videoHeight | Number | 220 | 视频高度（仅适用于嵌入式播放） |
+| titleLineClamp | Number | 1 | 标题显示行数 |
+| showPlayBtn | Boolean | true | 是否显示播放按钮 |
+| coverStyle | Object | {} | 视频封面图样式 |
+| playBtnStyle | Object | {} | 播放按钮样式 |
+
+#### value对象属性说明
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| feedId | String | "" | 视频 feedId |
+| finderUserName | String | "" | 视频号用户名 |
+| feedToken | String | "" | 视频 token |
+| coverUrl | String | "" | 视频封面图 |
+| videoTitle | String | "" | 视频标题 |
+| viewCount | Number | 0 | 观看次数 |
+| showViewCount | Boolean | false | 是否显示观看次数 |
+| embedMode | Boolean | false | 是否启用嵌入式播放 |
+
+#### 事件说明
+
+| 事件名 | 说明 | 参数 |
+|--------|------|------|
+| video-play | 点击视频播放时触发 | 视频数据对象 |
+
+### 3.3 单个视频号组件 (diy-channel.vue)
+
+#### 基本用法
+
+```vue
+<diy-channel :value="channelData" />
 ```

 #### 属性说明
@@ -124,6 +185,14 @@
 | componentAngle | String | "" | 组件圆角类型，可选值：round |
 | topAroundRadius | Number | 0 | 顶部圆角半径 |
 | bottomAroundRadius | Number | 0 | 底部圆角半径 |
+| embedMode | Boolean | false | 是否启用嵌入式播放 |
+| showViewCount | Boolean | false | 是否显示观看次数 |
+| finderUserName | String | "" | 视频号ID，用于嵌入式播放 |
+| feedToken | String | "" | 视频token，用于嵌入式播放 |
+| titleLineClamp | Number | 1 | 标题显示行数 |
+| showPlayBtn | Boolean | true | 是否显示播放按钮 |
+| coverStyle | Object | {} | 视频封面图样式 |
+| playBtnStyle | Object | {} | 播放按钮样式 |

 #### 事件说明

@@ -132,12 +201,12 @@
 | channel-tap | 点击视频号头像或名称时触发 | 视频号数据对象 |
 | video-play | 点击视频播放时触发 | 视频号数据对象 |

-### 3.2 视频号列表组件 (diy-wechat-channel-list.vue)
+### 3.4 视频号列表组件 (diy-channel-list.vue)

 #### 基本用法

 ```vue
-<diy-wechat-channel-list :value="channelListData" />
+<diy-channel-list :value="channelListData" />
 ```

 #### 属性说明
@@ -154,6 +223,18 @@
 | topAroundRadius | Number | 0 | 顶部圆角半径 |
 | bottomAroundRadius | Number | 0 | 底部圆角半径 |
 | ornament | Object | {} | 装饰样式配置 |
+| titleLineClamp | Number | 1 | 标题显示行数 |
+| showPlayBtn | Boolean | true | 是否显示播放按钮 |
+| coverStyle | Object | {} | 视频封面图样式 |
+| playBtnStyle | Object | {} | 播放按钮样式 |
+| imageSize | Number | 0 | 图片尺寸（仅在特定模式下使用） |
+| pageCount | Number | 1 | 每页显示的视频数量 |
+| carousel | Object | {} | 轮播配置 |
+| carousel.type | String | "" | 轮播类型，可选值：default, hide |
+| carousel.autoplay | Boolean | false | 是否自动播放 |
+| carousel.interval | Number | 3000 | 自动播放间隔，单位毫秒 |
+| carousel.duration | Number | 500 | 切换动画时长，单位毫秒 |
+| carousel.circular | Boolean | false | 是否循环播放 |

 #### list数组项说明

@@ -164,6 +245,10 @@
 | videoTitle | String | "" | 视频标题 |
 | feedId | String | "" | 视频号内容ID，用于播放视频 |
 | viewCount | Number | 0 | 视频观看次数 |
+| embedMode | Boolean | false | 是否启用嵌入式播放 |
+| showViewCount | Boolean | false | 是否显示观看次数 |
+| finderUserName | String | "" | 视频号ID，用于嵌入式播放 |
+| feedToken | String | "" | 视频token，用于嵌入式播放 |

 ## 4. 视频播放实现

@@ -290,7 +375,19 @@ if (typeof wx !== 'undefined' && wx.openChannelsActivity) {
  - 头像：200x200px
  - 封面：640x360px

-### 5.4 权限和关联
+### 5.4 播放按钮图标
+
+- 组件支持两种播放按钮图标方式：
+  1. **图片图标**：通过 `playIcon` 属性设置，优先级较高
+  2. **纯 CSS 图标**：当 `playIcon` 不可用时，组件会自动使用纯 CSS 生成的播放图标，确保播放按钮始终可见
+
+- 纯 CSS 图标特点：
+  - 不依赖外部图片资源，加载更快
+  - 支持响应式调整大小
+  - 具有与图片图标相同的悬停效果
+  - 在所有环境中都能正常显示
+
+### 5.5 权限和关联

 - 确保在微信小程序后台开通了「打开视频号内容」权限
 - 确保小程序已与视频号成功关联
@@ -392,25 +489,82 @@ if (typeof wx !== 'undefined' && wx.openChannelsActivity) {

 ## 7. 示例代码

-### 7.1 单个视频号示例
+### 7.1 视频号头部组件示例
+
+```javascript
+// 视频号头部数据
+const headerData = {
+    channelName: "示例视频号",
+    avatarUrl: "https://example.com/avatar.jpg",
+    showFollow: true
+};
+
+// 头部点击事件处理
+function handlerHeaderClick(data) {
+    console.log("头部被点击", data);
+    // 可以在这里处理跳转到视频号主页等逻辑
+}
+```
+
+### 7.2 视频号视频卡片组件示例
+
+```javascript
+// 视频卡片数据
+const videoData = {
+    channelName: "示例视频号",
+    coverUrl: "https://example.com/cover.jpg",
+    videoTitle: "这是一个示例视频，标题可能会很长，需要测试多行显示效果",
+    feedId: "v02004g10000c3f7l7j5u87l33n8f160",
+    viewCount: 12345,
+    embedMode: false,
+    showViewCount: true,
+    finderUserName: "example_finder",
+    feedToken: "example_feed_token"
+};
+
+// 视频播放事件处理
+function handlerVideoPlay(data) {
+    console.log("视频播放", data);
+    // 可以在这里处理视频播放逻辑
+}
+```
+
+### 7.3 单个视频号示例

 ```javascript
 // 单个视频号数据
 const channelData = {
    channelName: "示例视频号",
    avatarUrl: "https://example.com/avatar.jpg",
-    videoTitle: "这是一个示例视频",
+    videoTitle: "这是一个示例视频，标题可能会很长，需要测试多行显示效果",
    coverUrl: "https://example.com/cover.jpg",
    feedId: "v02004g10000c3f7l7j5u87l33n8f160",
    viewCount: 12345,
    showFollow: true,
    componentAngle: "round",
    topAroundRadius: 10,
-    bottomAroundRadius: 10
+    bottomAroundRadius: 10,
+    embedMode: false,
+    showViewCount: true,
+    finderUserName: "example_finder",
+    feedToken: "example_feed_token",
+    titleLineClamp: 2,
+    showPlayBtn: true,
+    coverStyle: {
+        width: "100%",
+        height: "0",
+        paddingTop: "56.25%" // 16:9 比例
+    },
+    playBtnStyle: {
+        width: "60rpx",
+        height: "60rpx",
+        borderRadius: "30rpx",
+        backgroundColor: "rgba(0, 0, 0, 0.6)"
+    }
 };
 ```

-### 7.2 视频号列表示例
+### 7.4 视频号列表示例

 ```javascript
 // 视频号列表数据
@@ -419,20 +573,29 @@ const channelListData = {
        {
            channelName: "示例视频号1",
            coverUrl: "https://example.com/cover1.jpg",
-            videoTitle: "这是示例视频1",
+            videoTitle: "这是示例视频1，标题可能会很长，需要测试多行显示效果",
            feedId: "v02004g10000c3f7l7j5u87l33n8f160",
-            viewCount: 12345
+            viewCount: 12345,
+            embedMode: false,
+            showViewCount: true,
+            finderUserName: "example_finder1",
+            feedToken: "example_feed_token1"
        },
        {
            channelName: "示例视频号2",
            coverUrl: "https://example.com/cover2.jpg",
-            videoTitle: "这是示例视频2",
+            videoTitle: "这是示例视频2，标题可能会很长，需要测试多行显示效果",
            feedId: "v02004g10000c3f7m7j5u87l33n8f161",
-            viewCount: 67890
+            viewCount: 67890,
+            embedMode: false,
+            showViewCount: true,
+            finderUserName: "example_finder2",
+            feedToken: "example_feed_token2"
        }
    ],
    rowCount: 2,
    showStyle: "fixed",
+    mode: "",
    font: {
        size: 14,
        weight: "normal",
@@ -441,7 +604,30 @@ const channelListData = {
    componentBgColor: "#fff",
    componentAngle: "round",
    topAroundRadius: 10,
-    bottomAroundRadius: 10
+    bottomAroundRadius: 10,
+    ornament: {},
+    titleLineClamp: 2,
+    showPlayBtn: true,
+    coverStyle: {
+        width: "100%",
+        height: "0",
+        paddingTop: "56.25%" // 16:9 比例
+    },
+    playBtnStyle: {
+        width: "60rpx",
+        height: "60rpx",
+        borderRadius: "30rpx",
+        backgroundColor: "rgba(0, 0, 0, 0.6)"
+    },
+    imageSize: 150,
+    pageCount: 1,
+    carousel: {
+        type: "default",
+        autoplay: true,
+        interval: 3000,
+        duration: 500,
+        circular: true
+    }
 };
 ```