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

选项卡魔方逻辑优化

master
于肖磊 2025-08-05 17:08:49 +08:00
parent ffc6ee68fb
commit 00dd2157f4
2 changed files with 27 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
pages/diy/components/diy/tabs-magic.vue
View File

@ -2,7 +2,7 @@
<view class="pr" :style="style_container + style_active_container + swiper_bg_style">
<view class="pa top-0 wh-auto ht-auto" :style="swiper_bg_img_style"></view>
<view class="wh-auto" :style="style_img_container + style_active_img_container + (!isEmpty(swiper_bg_img_style) ? swiper_bg_img_style_null : '')">
<component-diy-tabs :propKey="propKey" :propContentPadding="propContentPadding" :propValue="propValue" :propTop="propTop" :propIsRotatingBackground="is_rotating_background" :propBgStyle="swiper_bg_style" :propBgImgStyle="swiper_bg_img_style" :propStickyTop="propStickyTop" :propIsImmersionModel="propIsImmersionModel" :propNewIsTabsSafeDistance="new_is_tabs_safe_distance" :propNavIsTop="propNavIsTop" :propTabsIsTop="propTabsIsTop" :propIsCommon="false" :propsTabsContainer="tabs_container" :propsTabsImgContainer="tabs_img_container" :propSpacingCommonStyle="spacing_common_style" :propTabsSlidingFixedBg="tabs_sliding_fixed_bg" @onComputerHeight="tabs_height_event" @onTabsTap="tabs_click_event"></component-diy-tabs>
<component-diy-tabs :propKey="propKey" :propContentPadding="propContentPadding" :propValue="propValue" :propTop="propTop" :propIsRotatingBackground="is_rotating_background" :propBgStyle="swiper_bg_style" :propBgImgStyle="swiper_bg_img_style" :propStickyTop="propStickyTop" :propIsImmersionModel="propIsImmersionModel" :propNewIsTabsSafeDistance="new_is_tabs_safe_distance" :propNavIsTop="propNavIsTop" :propTabsIsTop="propTabsIsTop" :propIsCommon="false" :propsTabsContainer="tabs_container" :propsTabsImgContainer="tabs_img_container" :propSpacingCommonStyle="spacing_common_style" :propTabsSlidingFixedBg="tabs_sliding_fixed_bg" :propsIsTabsMagic="true" :propsTabsMagicStyle="tabs_magic_value_common_style" @onComputerHeight="tabs_height_event" @onTabsTap="tabs_click_event"></component-diy-tabs>
<view :style="magic_margin_top">
<view :style="magic_container">
<view :style="magic_img_container">
@ -192,6 +192,14 @@
return {};
}
},
// 当前选中的公共样式
tabs_magic_value_common_style() {
if (!isEmpty(this.tabs_magic_value)) {
return this.tabs_magic_value.style.magic_common;
} else {
return {};
}
},
// 是否开启轮播图背景设置
is_rotating_background() {
if (!isEmpty(this.active_tabs_value)) {
@ -202,16 +210,16 @@
},
// 当前选项卡的公共样式
style_active_container() {
if (!isEmpty(this.tabs_magic_value)) {
return this.tabs_magic_value.style.magic_common.is_show == '1' ? gradient_computer(this.tabs_magic_value.style.magic_common) : '';
if (!isEmpty(this.tabs_magic_value_common_style)) {
return this.tabs_magic_value_common_style.is_show == '1' ? gradient_computer(this.tabs_magic_value_common_style) : '';
} else {
return '';
}
},
// 当前选项卡的公共图片样式
style_active_img_container() {
if (!isEmpty(this.tabs_magic_value)) {
return this.tabs_magic_value.style.magic_common.is_show == '1' ? background_computer(this.tabs_magic_value.style.magic_common) : '';
if (!isEmpty(this.tabs_magic_value_common_style)) {
return this.tabs_magic_value_common_style.is_show == '1' ? background_computer(this.tabs_magic_value_common_style) : '';
} else {
return '';
}

16
pages/diy/components/diy/tabs.vue
View File

@ -105,6 +105,14 @@
propBgImgStyle: {
type: String,
default: ''
},
propsIsTabsMagic: {
type: Boolean,
default: false
},
propsTabsMagicStyle: {
type: Object,
default: {}
}
},
components: {
@ -160,6 +168,10 @@
// 初始化
this.init();
},
propsTabsMagicStyle(val) {
// 初始化
this.init();
}
},
methods: {
// 初始化数据
@ -190,9 +202,9 @@
this.setData({
tabs_data: new_tabs_data,
tabs_sliding_fixed_bg: this.propIsCommon ? gradient_computer(new_style.common_style) : this.propTabsSlidingFixedBg,
style_container: `max-width: calc(1600rpx - ${ max_width * 2 }rpx);` + (this.propIsCommon ? new_tabs_background + common_styles_computer(new_style.common_style) : new_content.tabs_top_up == '1' ? new_tabs_background + gradient_computer(new_style.common_style) + margin_computer(this.propSpacingCommonStyle) : ''), // 如果是选项卡轮播，不需要走默认样式
style_container: `max-width: calc(1600rpx - ${ max_width * 2 }rpx);` + (this.propIsCommon ? new_tabs_background + common_styles_computer(new_style.common_style) : new_content.tabs_top_up == '1' ? new_tabs_background + gradient_computer(this.propsIsTabsMagic && this.propsTabsMagicStyle.is_show == '1' ? this.propsTabsMagicStyle : new_style.common_style) + margin_computer(this.propSpacingCommonStyle) : ''), // 如果是选项卡轮播，不需要走默认样式
// 如果开了滑动置顶，并且开了沉浸式，不需要走传递过来的index，否则的话就用传递过来的index
style_img_container: this.propIsCommon ? common_img_computer(new_style.common_style, this.propIndex) : new_content.tabs_top_up == '1' ? background_computer(new_style.common_style) + padding_computer(this.propSpacingCommonStyle, 1, false) + 'box-sizing: border-box;' : '', // 如果是选项卡轮播，不需要走默认样式
style_img_container: this.propIsCommon ? common_img_computer(new_style.common_style, this.propIndex) : new_content.tabs_top_up == '1' ? background_computer(this.propsIsTabsMagic && this.propsTabsMagicStyle.is_show == '1' ? this.propsTabsMagicStyle : new_style.common_style) + padding_computer(this.propSpacingCommonStyle, 1, false) + 'box-sizing: border-box;' : '', // 如果是选项卡轮播，不需要走默认样式
tabs_top_style: new_tabs_top_style,
// 沉浸模式下并且开通了安全距离 会显示-的margin
style_margin_container: this.propIsImmersionModel && this.propNewIsTabsSafeDistance ? `margin-top: -${ newPropTop }px;` : '',