sileya-ai
/
vr-shopxo-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增短视频插件

master
于肖磊 2026-03-03 10:36:12 +08:00
parent 5a4d0e962b
commit 43a67fc0ab
2 changed files with 651 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

387
pages/diy/components/diy/plugins-video-list.vue Normal file
View File

@ -0,0 +1,387 @@
<template>
<!-- 视频列表 -->
<view class="oh" :style="style_container">
<view class="oh" :style="style_img_container">
<view class="pr oh" :style="style">
<view v-if="!['4'].includes(plugins_video_theme)" class="flex-wrap" :class="plugins_video_theme_class" :style="plugins_video_theme !== '3' ? plugins_video_spacing : ''">
<view v-for="(item, index) in data_list" :key="index" class="item oh" :style="plugins_video_style" :data-value="item.data.url" @tap="url_event">
<view :class="plugins_video_theme == '0' ? 'flex-row oh' : 'flex-col oh h'" :style="plugins_video_img_style">
<template v-if="plugins_video_theme !== '3'">
<view class="oh pr flex-row">
<template v-if="item.new_cover.length > 0">
<image :src="item.new_cover[0].url" class="img" :style="img_radius + img_size" mode="aspectFill" />
</template>
<template v-else>
<image :src="item.data.cover" class="img" :style="img_radius + img_size" mode="aspectFill" />
</template>
<!-- 角标 -->
<subscriptIndex :propValue="propValue"></subscriptIndex>
</view>
</template>
<view v-if="field_show.includes('0') || field_show.includes('1') || field_show.includes('2') || field_show.includes('3')" class="jc-sb flex-1" :class="plugins_video_theme == '3' ? 'flex-row align-c' : 'flex-col'" :style="plugins_video_theme !== '0' ? content_padding : ''">
<view class="flex-col" :class="plugins_video_theme == '3' ? 'flex-1 flex-width' : ''">
<text v-if="field_show.includes('3')" class="title" :class="plugins_video_theme == '3' ? 'text-line-1' : 'text-line-2'" :style="plugins_video_name">{{ item.new_title ? item.new_title : item.data.title }}</text>
</view>
<view class="flex-row jc-sb gap-8" :class="plugins_video_theme == '3' ? 'margin-left' : 'align-e margin-top'">
<text :style="plugins_video_date">{{ field_show.includes('0') ? item.data.add_time : '' }}</text>
<view v-show="field_show.includes('1')" class="flex-row align-c gap-3" :style="plugins_video_page_view">
<iconfont name="icon-eye" propContainerDisplay="flex" size="24rpx"></iconfont>
<view>
{{ item.data.access_count ? item.data.access_count : '' }}
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view v-else class="oh" :class="plugins_video_theme_class">
<swiper class="swiper" circular :autoplay="is_roll ? true : false" :interval="interval_time" :next-margin="next_margin" :display-multiple-items="slides_per_group" :style="'height:' + carousel_height_computer">
<swiper-item v-for="(item1, index1) in plugins_video_carousel_list" :key="index1">
<view class="flex-row ht-auto" :style="plugins_video_spacing">
<view v-for="(item, index) in item1.split_list" :key="index" class="item oh ht-auto" :style="plugins_video_style" :data-value="item.data.url" @tap="url_event">
<template v-if="!isEmpty(item)">
<view class="oh flex-col ht-auto" :style="plugins_video_img_style">
<view class="oh pr wh-auto ht-auto flex-row">
<template v-if="item.new_cover.length > 0">
<image :src="item.new_cover[0].url" class="img" :style="img_radius + 'height:100%;'" mode="aspectFill" />
</template>
<template v-else>
<image :src="item.data.cover" class="img" :style="img_radius + 'height:100%;'" mode="aspectFill" />
</template>
<template v-if="field_show.includes('3') && name_float == '1'">
<text class="text-line-1" :style="plugins_video_name + float_name_style">{{ item.new_title ? item.new_title : item.data.title }}</text>
</template>
<!-- 角标 -->
<subscriptIndex :propValue="propValue"></subscriptIndex>
</view>
<view v-if="field_show.includes('0') || field_show.includes('1') || field_show.includes('2') || (field_show.includes('3') && name_float == '0')" class="jc-sb flex-1 flex-col" :style="plugins_video_theme !== '0' ? content_padding : ''">
<view class="flex-col">
<text v-if="field_show.includes('3') && name_float == '0'" class="title text-line-2" :style="plugins_video_name + plugins_video_name_height_computer">{{ item.new_title ? item.new_title : item.data.title }}</text> -->
</view>
<view :class="'flex-row jc-sb gap-8 align-e' + ((field_show.includes('3') && name_float == '0') || field_show.includes('2') ? ' margin-top' : '')">
<text :style="plugins_video_date">{{ field_show.includes('0') ? item.data.add_time : '' }}</text>
<view v-show="field_show.includes('1')" class="flex-row align-c gap-3" :style="plugins_video_page_view">
<iconfont name="icon-eye" propContainerDisplay="flex" size="24rpx"></iconfont>
<view>
{{ item.data.access_count ? item.data.access_count : '' }}
</view>
</view>
</view>
</view>
</view>
</template>
</view>
</view>
</swiper-item>
</swiper>
</view>
</view>
</view>
</view>
</template>
<script>
const app = getApp();
import { isEmpty, common_styles_computer, common_img_computer, padding_computer, radius_computer, get_math, gradient_handle, background_computer, gradient_computer, margin_computer, box_shadow_computer, border_computer, old_margin, get_swiper_list } from '@/common/js/common/common.js';
import subscriptIndex from '@/pages/diy/components/diy/modules/subscript.vue';
var system = app.globalData.get_system_info(null, null, true);
var sys_width = app.globalData.window_width_handle(system.windowWidth);
export default {
components: {
subscriptIndex,
},
props: {
propValue: {
type: Object,
default: () => {},
},
// 是否使用公共样式
propIsCommonStyle: {
type: Boolean,
default: true,
},
// 关键key
propKey: {
type: [String, Number],
default: '',
},
// 组件渲染的下标
propIndex: {
type: Number,
default: 1000000,
},
},
data() {
return {
style_container: '',
style_img_container: '',
style: '',
// 数据
data_list: [],
// 风格
plugins_video_theme: '0',
// 是否显示
field_show: ['0', '1'],
// 视频
plugins_video_name: '',
// 日期
plugins_video_date: '',
// 浏览量
plugins_video_page_view: '',
// 内容圆角
content_radius: '',
// 图片圆角
img_radius: '',
// 内间距
content_padding: '',
// 内容间距
content_spacing: '',
// 视频间距
plugins_video_spacing: '',
// plugins_video_item_height: '',
plugins_video_style: '',
plugins_video_img_style: '',
// 轮播图定时轮播
interval_time: 2000,
// 轮播图是否滚动
is_roll: 1,
plugins_video_theme_class: '',
// 轮播高度
carousel_height_computer: '',
// 视频内容高度
plugins_video_name_height_computer: '',
// 视频名称浮动样式
float_name_style: '',
name_float: '0',
// 图片大小
img_size: '',
// 视频轮播数据
plugins_video_carousel_list: [],
// 一行显示的数量
slides_per_group: 1,
next_margin: '0rpx',
};
},
watch: {
propKey(val) {
// 初始化
this.init();
},
},
created() {
this.init();
},
methods: {
isEmpty,
// 初始化数据
init() {
const new_content = this.propValue.content || {};
const new_style = this.propValue.style || {};
this.setData({
name_float: !isEmpty(new_content.name_float) ? new_content.name_float : '0',
// 判断是自动还是手动
data_list:
new_content.data_type == '0'
? new_content.data_list
: new_content.data_auto_list && new_content.data_auto_list.length > 0
? new_content.data_auto_list.map((item) => ({
id: get_math(),
new_title: '',
new_cover: [],
data: item,
}))
: [],
plugins_video_theme_class: this.plugins_video_theme_class_computer(new_content.theme),
plugins_video_theme: new_content.theme,
field_show: new_content.field_show,
// 样式
plugins_video_name: 'font-size:' + new_style.name_size * 2 + 'rpx;' + 'font-weight:' + new_style.name_weight + ';' + 'color:' + new_style.name_color + ';',
plugins_video_date: 'font-size:' + new_style.time_size * 2 + 'rpx;' + 'font-weight:' + new_style.time_weight + ';' + 'color:' + new_style.time_color + ';',
plugins_video_page_view: 'font-size:' + new_style.page_view_size * 2 + 'rpx;' + 'font-weight:' + new_style.page_view_weight + ';' + 'color:' + new_style.page_view_color + ';',
content_radius: radius_computer(new_style.content_radius),
img_radius: radius_computer(new_style.img_radius),
// 内间距
content_padding: padding_computer(new_style.padding),
// 内容间距
content_spacing: `gap: ${new_style.content_spacing}px;`,
// 视频间距
plugins_video_spacing: `gap: ${new_style.plugins_video_spacing}px;`,
next_margin: new_style.rolling_fashion == 'translation' ? '-' + new_style.plugins_video_spacing_margin + 'px' : '0rpx',
// 视频内容高度
slides_per_group: new_style.rolling_fashion == 'translation' ? Number(new_content.carousel_col) + 1 : 1,
});
// 默认数据
const product_style_list = [
{ name: '单列展示', value: '0', width:110, height: 83 },
{ name: '两列展示（纵向）', value: '1', width:180, height: 180 },
{ name: '大图展示', value: '2', width:0, height: 180 },
{ name: '无图模式', value: '3', width:0, height: 0 },
{ name: '左右滑动展示', value: '4', width:0, height: 0 },
];
const scale = sys_width / 390;
let img_style = ``;
if (['0'].includes(new_content.theme)) {
// 图片宽度
if (typeof new_style.content_img_width == 'number') {
img_style += `width: ${ new_style.content_img_width * scale }px;`;
} else {
const list = product_style_list.filter(item => item.value == new_content.theme);
if (list.length > 0) {
img_style += `width: ${ list[0].width * scale }px;`;
} else {
img_style += 'width: auto;';
}
}
}
if (!['3', '4'].includes(new_content.theme)) {
// 图片宽度
if (typeof new_style.content_img_height == 'number') {
img_style += `height: ${ new_style.content_img_height * scale }px;`;
} else {
const list = product_style_list.filter(item => item.value == new_content.theme);
if (list.length > 0) {
img_style += `height: ${ list[0].height * scale }px;`;
} else {
img_style += 'height: auto;';
}
}
}
// 背景图的处理
const plugins_video_data = {
background_img_style: new_style?.plugins_video_background_img_style || '',
background_img: new_style?.plugins_video_background_img || '',
}
const plugins_video_margin = new_style.value?.margin || old_margin;
const margin_width = plugins_video_margin.margin_left + plugins_video_margin.margin_right;
// 渐变效果
const all_style = gradient_handle(new_style?.plugins_video_color_list || [], new_style?.plugins_video_direction || '') + margin_computer(plugins_video_margin) + box_shadow_computer(new_style) + border_computer(new_style);
// 视频样式
if (this.plugins_video_theme == '0') {
this.setData({
img_size: img_style,
plugins_video_style: this.content_radius + all_style,
plugins_video_img_style: this.content_spacing + this.content_padding + background_computer(plugins_video_data)
});
} else if (this.plugins_video_theme == '1') {
this.setData({
img_size: img_style,
plugins_video_style: `width: calc(50% - ${(new_style.plugins_video_spacing + (margin_width * 2)) / 2}px);` + this.content_radius + all_style,
plugins_video_img_style: background_computer(plugins_video_data)
});
} else if (this.plugins_video_theme == '2') {
this.setData({
img_size: img_style,
plugins_video_style: this.content_radius + all_style,
plugins_video_img_style: background_computer(plugins_video_data)
});
} else if (this.plugins_video_theme == '3') {
this.setData({
style: `padding: 0 ${new_style.content_spacing}px;background:#fff;` + this.content_radius,
});
} else if (this.plugins_video_theme == '4') {
// 更新轮播图的key，确保更换时能重新更新轮播图
const temp_carousel_col = new_content.carousel_col || '1';
// 计算间隔的空间。(gap * gap数量) / 模块数量
let gap = temp_carousel_col !== '0' ? ((new_style.plugins_video_spacing * temp_carousel_col - 1) + (margin_width * temp_carousel_col)) / temp_carousel_col : '0';
const multicolumn_columns_width = new_style.rolling_fashion == 'translation' ? `margin-right: ${ new_style.plugins_video_spacing + plugins_video_margin.margin_right }px;width:100%;` : `width:calc(${100 / (Number(temp_carousel_col) + 1)}% - ${gap * 2}rpx);min-width:calc(${100 / (Number(temp_carousel_col) + 1)}% - ${gap * 2}rpx);`;
const { name_bg_color_list = [], name_bg_direction = '180deg', name_bg_radius, name_bg_padding, name_bg_margin } = new_style;
const data = {
color_list: name_bg_color_list,
direction: name_bg_direction,
}
let location = 'position:absolute;bottom:0;left:0;right:0;'
// 每页显示的数量
const num = Number(temp_carousel_col) + 1;
// 轮播宽度
this.setData({
// 滚动时间
interval_time: (new_style.interval_time || 2) * 1000,
// 是否滚动修改
is_roll: new_style.is_roll,
// plugins_video_item_height: `height: ${new_style.plugins_video_height }px`,
plugins_video_style: this.content_radius + all_style + multicolumn_columns_width,
// 轮播高度
carousel_height_computer: new_style.plugins_video_height * scale + 'px',
// 视频内容高度
plugins_video_name_height_computer: `height:${new_style.name_size * 2.4 * 2}rpx;line-height:${new_style.name_size * 1.2 * 2}rpx;`,
float_name_style: gradient_computer(data) + (!isEmpty(name_bg_radius) ? radius_computer(name_bg_radius) : '') + (!isEmpty(name_bg_padding) ? padding_computer(name_bg_padding) : '' ) + (!isEmpty(name_bg_padding) ? margin_computer(name_bg_margin) : '') + location,
plugins_video_img_style: background_computer(plugins_video_data),
plugins_video_carousel_list: get_swiper_list(this.data_list, num, new_style.rolling_fashion),
});
}
if (this.propIsCommonStyle) {
this.setData({
style_container: common_styles_computer(new_style.common_style),
style_img_container: common_img_computer(new_style.common_style, this.propIndex),
});
}
},
// 视频主题样式
plugins_video_theme_class_computer(theme) {
switch (theme) {
case '0':
return 'style1 flex-col';
case '1':
return 'style2 flex-row flex-wrap';
case '2':
return 'style3 flex-col';
case '3':
return 'style4 flex-col';
default:
return 'style5';
}
},
// 跳转链接
url_event(e) {
app.globalData.url_event(e);
},
},
};
</script>
<style lang="scss" scoped>
.h {
height: 100%;
}
.style1 {
.item {
max-width: 100%;
}
}
.style2 {
.item {
.img {
width: 100%;
}
}
}
.style3 {
.item {
width: 100%;
.img {
width: 100%;
}
}
}
.style4 {
.item {
width: 100%;
&:not(:last-child) {
border-bottom: 2rpx solid #eee;
}
}
}
.style5 {
.item {
width: 100%;
.img {
width: 100%;
}
}
}
</style>

264
pages/diy/components/diy/plugins-video-tabs.vue Normal file
View File

@ -0,0 +1,264 @@
<template>
<!-- 文章列表 -->
<view class="plugins-video-tabs" :class="'plugins-video-tabs-' + propKey" :style="style_container">
<view :style="style_img_container">
<component-diy-modules-tabs-view :propKey="propKey" :propValue="plugins_video_tabs" :propIsTop="top_up == '1'" :propTop="sticky_top" :propStyle="tabs_style" :propsTabsContainer="tabs_container" :propsTabsImgContainer="tabs_img_container" :propCustomNavHeight="propIsTabsUseSafeDistance ? (propCustomNavHeight * 2 + 'rpx') : '0rpx'" :propTabsBackground="tabs_background" :propTabsSlidingFixedBg="tabs_sliding_fixed_bg" @onTabsTap="tabs_click_event"></component-diy-modules-tabs-view>
<view :style="plugins_video_margin_top">
<view :style="plugins_video_container">
<view :style="plugins_video_img_container">
<component-diy-plugins-video-list :propKey="diy_key" :propValue="plugins_video_tabs" :propIsCommonStyle="false"></component-diy-plugins-video-list>
</view>
</view>
</view>
</view>
</view>
</template>
w
<script>
const app = getApp();
import { common_styles_computer, common_img_computer, padding_computer, margin_computer, background_computer, gradient_computer, radius_computer, isEmpty, box_shadow_computer, border_computer, old_border_and_box_shadow, old_margin, old_padding } from '@/common/js/common/common.js';
import componentDiyModulesTabsView from '@/pages/diy/components/diy/modules/tabs-view';
import componentDiyPluginsVideoList from '@/pages/diy/components/diy/plugins-video-list'; // 状态栏高度
var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
// #ifdef MP-TOUTIAO
bar_height = 0;
// #endif
export default {
props: {
propValue: {
type: Object,
default: () => {},
},
// 距离顶部高度
propTop: {
type: Number,
default: 0,
},
// 自定义导航栏高度
propCustomNavHeight: {
type: Number,
default: 33,
},
// 滚动距离
propScrollTop: {
type: Number,
default: 0,
},
// 顶部导航是否开启沉浸模式
propIsImmersionModel: {
type: Boolean,
default: false,
},
propKey: {
type: [String, Number],
default: '',
},
// 组件渲染的下标
propIndex: {
type: Number,
default: 1000000,
},
// 选项卡是否使用安全距离
propIsTabsUseSafeDistance: {
type: Boolean,
default: true
}
},
components: {
componentDiyModulesTabsView,
componentDiyPluginsVideoList,
},
data() {
return {
style_container: '',
style_img_container: '',
style: '',
plugins_video_tabs: {},
// 是否滑动置顶
top_up: '0',
tabs_style: '',
tabs_top: 0,
tabs_background: 'background:transparent',
custom_nav_height: 33,
diy_key: '',
// 选项卡背景设置
plugins_video_margin_top: '',
tabs_container: '',
tabs_img_container: '',
tabs_sliding_fixed_bg: '',
// 商品区域背景设置
plugins_video_container: '',
plugins_video_img_container: '',
// #ifdef MP
nav_safe_space: bar_height + 5,
// #endif
// #ifdef H5 || MP-TOUTIAO
nav_safe_space: bar_height + 7,
// #endif
// #ifdef APP
nav_safe_space: bar_height + 0,
// #endif
// 选项卡默认数据
tabs_index: 0,
sticky_top: 0,
};
},
watch: {
// 监听滚动距离
propScrollTop(newVal) {
if (newVal + this.sticky_top + this.custom_nav_height > this.tabs_top + this.nav_safe_space && this.top_up == '1') {
let new_style = this.propValue.style || {};
let tabs_bg = new_style.common_style.color_list;
let new_tabs_background = '';
if (tabs_bg.length > 0 && (tabs_bg[0].color || null) != null) {
new_tabs_background = gradient_computer(new_style.common_style);
}
let new_tabs_background_img = background_computer(new_style.common_style);
if (new_tabs_background_img.length > 0) {
new_tabs_background_img += 'background-position: top left;';
}
this.tabs_background = (new_tabs_background.length > 0 ? new_tabs_background : 'background:#fff;') + new_tabs_background_img;
} else {
this.tabs_background = 'background:transparent';
}
},
propTop(val) {
this.init();
},
propKey(val) {
this.setData({
diy_key: val,
});
// 初始化
this.init();
},
},
created() {
this.init();
},
mounted() {
this.$nextTick(() => {
const self = this;
setTimeout(() => {
self.getTop();
});
// #ifdef H5 || MP-TOUTIAO
// 获取自定义导航栏高度
this.setData({
custom_nav_height: this.propCustomNavHeight,
});
// #endif
});
},
methods: {
// 初始化数据
init() {
let new_content = this.propValue.content || {};
let new_style = this.propValue.style || {};
let new_data = JSON.parse(JSON.stringify(this.propValue));
const new_tabs_data = new_data.content.tabs_list[this.tabs_index] || {};
new_data.content.theme = new_data.content.plugins_video_theme;
new_data.content.data_type = new_tabs_data.data_type;
new_data.content.category = new_tabs_data.category;
new_data.content.carousel_col = new_data.content.plugins_video_carousel_col;
new_data.content.data_list = new_tabs_data.data_list;
new_data.content.data_auto_list = new_tabs_data.data_auto_list;
new_data.content.data_ids = new_tabs_data.data_ids;
new_data.content.number = new_tabs_data.number;
new_data.content.sort = new_tabs_data.sort;
new_data.content.sort_rules = new_tabs_data.sort_rules;
new_data.content.field_show = new_data.content.field_show;
new_data.content.is_cover = new_tabs_data.is_cover;
// 公共样式
const common_style = new_style.common_style;
let tabs_style_obj = {
padding_top: common_style.padding_top - this.propCustomNavHeight < 0 ? 0 : common_style.padding_top - this.propCustomNavHeight,
padding_left: common_style.padding_left,
padding_right: common_style.padding_right,
};
let new_tabs_style = padding_computer(tabs_style_obj) + margin_computer(tabs_style_obj) + `position:relative;left: -${tabs_style_obj.padding_left * 2}rpx;right: -${tabs_style_obj.padding_right * 2}rpx;width:100%;`;
// 如果是历史数据的话，就执行默认添加下边距
if (isEmpty(new_style.tabs_padding)) {
new_tabs_style += 'padding-bottom: 20rpx;';
}
const { tabs_bg_color_list = [], tabs_bg_direction = '', tabs_bg_background_img_style = '', tabs_bg_background_img = [], tabs_radius = old_radius, tabs_padding = old_padding, plugins_video_content_color_list = [], plugins_video_content_direction = '', plugins_video_content_background_img_style = '', plugins_video_content_background_img = [], plugins_video_content_margin = old_margin, plugins_video_content_padding = old_padding, plugins_video_content_radius = old_radius } = new_style;
// 选项卡背景设置
const tabs_data = {
color_list: tabs_bg_color_list,
direction: tabs_bg_direction,
background_img_style: tabs_bg_background_img_style,
background_img: tabs_bg_background_img,
};
// 文章区域背景设置
const plugins_video_content_data = {
color_list: plugins_video_content_color_list,
direction: plugins_video_content_direction,
background_img_style: plugins_video_content_background_img_style,
background_img: plugins_video_content_background_img,
};
const plugins_video_content = new_style?.plugins_video_content || old_border_and_box_shadow;
const tabs_content = new_style?.tabs_content || old_border_and_box_shadow;
this.setData({
top_up: new_content.tabs_top_up,
sticky_top: this.propTop + (new_style?.tabs_margin?.margin_top || 0),
plugins_video_tabs: new_data,
style_container: common_styles_computer(common_style) + (new_content.tabs_top_up == '1' ? 'overflow: unset;' : ''),
style_img_container: common_img_computer(common_style, this.propIndex) + radius_computer(common_style) +(new_content.tabs_top_up == '1' ? 'overflow: unset;' : ''),
tabs_style: new_tabs_style,
plugins_video_margin_top: 'margin-top:' + (new_style?.plugins_video_content_spacing || 0) * 2 + 'rpx',
tabs_sliding_fixed_bg: gradient_computer(tabs_data),
tabs_container: gradient_computer(tabs_data) + radius_computer(tabs_radius) + margin_computer(new_style?.tabs_margin || old_margin) + border_computer(tabs_content) + box_shadow_computer(tabs_content) + 'overflow: hidden;',
tabs_img_container: background_computer(tabs_data) + padding_computer(tabs_padding) + 'box-sizing: border-box;overflow: hidden;',
plugins_video_container: gradient_computer(plugins_video_content_data) + margin_computer(plugins_video_content_margin) + radius_computer(plugins_video_content_radius) + box_shadow_computer(plugins_video_content) + border_computer(plugins_video_content) + 'overflow: hidden;',
plugins_video_img_container: background_computer(plugins_video_content_data) + padding_computer(plugins_video_content_padding) + 'box-sizing: border-box;overflow: hidden;',
});
},
// tabs切换事件
tabs_click_event(index) {
let new_data = JSON.parse(JSON.stringify(this.propValue));
new_data.content.theme = new_data.content.plugins_video_theme;
new_data.content.data_type = new_data.content.tabs_list[index].data_type;
new_data.content.category = new_data.content.tabs_list[index].category;
new_data.content.carousel_col = new_data.content.plugins_video_carousel_col;
new_data.content.data_list = new_data.content.tabs_list[index].data_list;
new_data.content.data_auto_list = new_data.content.tabs_list[index].data_auto_list;
new_data.content.data_ids = new_data.content.tabs_list[index].data_ids;
new_data.content.number = new_data.content.tabs_list[index].number;
new_data.content.sort = new_data.content.tabs_list[index].sort;
new_data.content.sort_rules = new_data.content.tabs_list[index].sort_rules;
new_data.content.field_show = new_data.content.field_show;
new_data.content.is_cover = new_data.content.tabs_list[index].is_cover;
this.setData({
tabs_index: index,
plugins_video_tabs: new_data,
diy_key: Math.random(),
});
},
// 获取商品距离顶部的距离
getTop() {
const query = uni.createSelectorQuery().in(this);
query
.select('.plugins-video-tabs-' + this.propKey)
.boundingClientRect((res) => {
if ((res || null) != null) {
let new_data = typeof this.propValue == 'string' ? JSON.parse(JSON.stringify(this.propValue)) : this.propValue;
const new_style = new_data.style || {};
this.setData({
tabs_top: res.top - (new_style.common_style?.margin_top || 0) + (new_style?.tabs_margin?.margin_top || 0),
});
}
})
.exec();
},
},
};
</script>
<style lang="scss" scoped>
.tabs-container {
position: relative;
width: 100%;
left: 0;
right: 0;
}
</style>