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-10 17:38:13 +08:00
parent 13166132c7
commit 68bc853dff
3 changed files with 417 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,29 +1,40 @@
<template>
<view :style="[componentStyle, { '--row-count': value.rowCount }]">
<!-- 固定布局模式 -->
<view v-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)"
: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 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>
<!-- 其他布局模式 -->
<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
<!-- 固定布局模式 -->
<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)"
@video-play="playVideo(item)"
:list-mode="true"
:video-height="value.rowCount === 3 ? 180 : 240"
:title-line-clamp="value.titleLineClamp"
@@ -31,6 +42,25 @@
:cover-style="value.coverStyle"
:play-btn-style="value.playBtnStyle"
/>
</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)"
: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>
</scroll-view>
@@ -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: {
@@ -54,18 +84,27 @@ export default {
* 组件配置数据
* @type {Object}
* @default () => ({})
* @property {string} showStyle - 显示样式，可选值：fixed, singleSlide
* @property {number} rowCount - 每行显示的视频数量
* @property {Array} list - 视频列表数据
* @property {string} componentBgColor - 组件背景色
* @property {string} componentAngle - 组件圆角类型
* @property {number} topAroundRadius - 顶部圆角半径
* @property {number} bottomAroundRadius - 底部圆角半径
* @property {Object} ornament - 装饰效果配置
* @property {number} titleLineClamp - 标题显示行数
* @property {boolean} showPlayBtn - 是否显示播放按钮
* @property {Object} coverStyle - 视频封面图样式
* @property {Object} playBtnStyle - 播放按钮样式
* @property {string} showStyle - 显示样式，可选值：fixed, singleSlide
* @property {number} rowCount - 每行显示的视频数量
* @property {Array} list - 视频列表数据
* @property {string} componentBgColor - 组件背景色
* @property {string} componentAngle - 组件圆角类型，可选值：round
* @property {number} topAroundRadius - 顶部圆角半径
* @property {number} bottomAroundRadius - 底部圆角半径
* @property {Object} ornament - 装饰效果配置
* @property {number} titleLineClamp - 标题显示行数
* @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;