Uniapp/lucky_shop
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(视频号组件): 支持轮播模式

Browse Source
This commit is contained in:
ZF Sun
2026-01-15 10:16:29 +08:00
parent 16d1a3a945
commit 0ed0789528
1 changed files with 45 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
components-diy/diy-channel-list.vue
View File

@@ -1,18 +1,18 @@
<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"
<swiper v-if="value.showStyle == 'carousel' && carouselConfig.type != 'hide'" :indicator-dots="isIndicatorDots"
:autoplay="carouselConfig.autoplay || false" :interval="carouselConfig.interval || 3000"
:duration="carouselConfig.duration || 500" :circular="carouselConfig.circular || false"
:style="swiperHeight" class="channel-swiper">
<swiper-item v-for="(slide, slideIndex) in swiperSlides" :key="slideIndex">
<view :class="['swiper-slide-content', 'row1-of' + value.rowCount]">
<view v-for="(item, index) in slide" :key="index" :class="['channel-item', value.mode]">
<!-- 视频号视频卡片，轮播模式 -->
<diy-channel-video :value="item" @video-play="playVideo" :list-mode="true"
:title-line-clamp="value.titleLineClamp"
:show-play-btn="value.showPlayBtn" :cover-style="computedCoverStyle"
:play-btn-style="value.playBtnStyle" :aspect-ratio="value.aspectRatio" />
<view :class="['swiper-slide-content', 'row1-of' + value.rowCount]">
<view v-for="(item, index) in slide" :key="index" :class="['channel-item', value.mode]">
<!-- 视频号视频卡片，轮播模式 -->
<diy-channel-video :value="item" @video-play="playVideo" :list-mode="true"
:title-line-clamp="value.titleLineClamp" :show-play-btn="value.showPlayBtn"
:cover-style="computedCoverStyle" :play-btn-style="value.playBtnStyle"
:aspect-ratio="value.aspectRatio" />
</view>
</view>
</swiper-item>
@@ -23,9 +23,9 @@
<view v-for="(item, index) in value.list" :key="index" class="channel-item">
<!-- 视频号视频卡片，列表模式 -->
<diy-channel-video :value="item" @video-play="playVideo" :list-mode="true"
:title-line-clamp="value.titleLineClamp"
:show-play-btn="value.showPlayBtn" :cover-style="computedCoverStyle"
:play-btn-style="value.playBtnStyle" :aspect-ratio="value.aspectRatio" />
:title-line-clamp="value.titleLineClamp" :show-play-btn="value.showPlayBtn"
:cover-style="computedCoverStyle" :play-btn-style="value.playBtnStyle"
:aspect-ratio="value.aspectRatio" />
</view>
</view>
@@ -37,9 +37,9 @@
<view v-for="(item, index) in value.list" :key="index" :class="['channel-nav-item', value.mode]">
<!-- 视频号视频卡片，滚动模式 -->
<diy-channel-video :value="item" @video-play="playVideo" :list-mode="true"
:title-line-clamp="value.titleLineClamp"
:show-play-btn="value.showPlayBtn" :cover-style="computedCoverStyle"
:play-btn-style="value.playBtnStyle" :aspect-ratio="value.aspectRatio" />
:title-line-clamp="value.titleLineClamp" :show-play-btn="value.showPlayBtn"
:cover-style="computedCoverStyle" :play-btn-style="value.playBtnStyle"
:aspect-ratio="value.aspectRatio" />
</view>
</view>
</scroll-view>
@@ -63,7 +63,7 @@ export default {
* 组件配置数据
* @type {Object}
* @default () => ({})
* @property {string} showStyle - 显示样式，可选值：fixed, singleSlide
* @property {string} showStyle - 显示样式，可选值：carousel, fixed, singleSlide
* @property {number} rowCount - 每行显示的视频数量
* @property {Array} list - 视频列表数据
* @property {string} componentBgColor - 组件背景色
@@ -76,7 +76,7 @@ export default {
* @property {boolean} showPlayBtn - 是否显示播放按钮
* @property {Object} coverStyle - 视频封面图样式
* @property {Object} playBtnStyle - 播放按钮样式
* @property {string} mode - 显示模式
* @property {string} mode - 显示模式, 可选值：video, text, image, graphic
* @property {number} imageSize - 图片尺寸（仅在特定模式下使用）
* @property {number} pageCount - 每页显示的视频数量
* @property {Object} carousel - 轮播配置
@@ -115,6 +115,15 @@ export default {
}
},
computed: {
carouselConfig() {
return this.value?.carousel || {
type: 'default',
autoplay: false,
interval: 3000,
duration: 500,
circular: true
}
},
/**
* 组件样式
* 根据配置动态生成样式字符串，包括背景色、圆角、阴影和边框
@@ -151,13 +160,21 @@ export default {
swiperHeight() {
let height = 0;
const pageCount = this.value?.pageCount || 1;
// 根据不同模式计算高度
if (this.value?.mode == 'graphic') {
height = (49 + this.value?.imageSize) * this.value?.pageCount;
height = (49 + this.value?.imageSize) * pageCount;
} else if (this.value?.mode == 'img') {
height = (22 + this.value?.imageSize) * this.value?.pageCount;
height = (22 + this.value?.imageSize) * pageCount;
} else if (this.value?.mode == 'text') {
height = 43 * this.value?.pageCount;
height = 43 * pageCount;
} else { // 默认视频模式
if (this.value?.aspectRatio == '16:9') {
height = [250, 160, 140, 120][this.value.rowCount - 1];
} else {
height = [510, 280, 220, 180][this.value.rowCount - 1];
}
}
return 'height:' + (2 * height) + 'rpx';
@@ -170,8 +187,8 @@ export default {
*/
isIndicatorDots() {
// 当轮播类型不是隐藏，且视频数量超过一页时显示指示器
return this.value?.carousel?.type != 'hide' &&
1 != Math.ceil(this.value?.list?.length / (this.value?.pageCount * this.value?.rowCount));
const pageCount = this.value?.pageCount || 1;
return this.value?.carousel?.type != 'hide' && Math.ceil(this.value?.list?.length / (pageCount * this.value?.rowCount)) > 1
},
/**
@@ -461,5 +478,4 @@ export default {
// padding-top: 56.25%; // 16:9 比例
// }
// }
// }
</style>
// }</style>