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

选项卡魔方数据显示

master
于肖磊 2025-08-05 17:56:46 +08:00
parent 00dd2157f4
commit 3f49e38eb7
4 changed files with 63 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
pages/diy/components/diy/modules/tabs-view.vue
View File

@ -156,6 +156,10 @@
propTabsSlidingFixedBg: {
type: String,
default: ''
},
propsTabsSlidingFixedStyle: {
type: String,
default: ''
}
},
data() {
@ -229,7 +233,7 @@
},
get_item_style() {
return (val) => {
return val == '1' ? `${ this.propTabsSlidingFixedBg };position: sticky;left: 0;z-index: 11;` : ''
return val == '1' ? `${ isEmpty(this.propsTabsSlidingFixedStyle) ? this.propTabsSlidingFixedBg : this.propsTabsSlidingFixedStyle };position: sticky;left: 0;z-index: 11;` : ''
}
}
},
@ -254,7 +258,7 @@
} else {
this.tabs_sticky = '';
}
},
}
},
mounted() {
this.init();

25
pages/diy/components/diy/tabs-carousel.vue
View File

@ -2,7 +2,7 @@
<view class="pr" :style="style_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 + (!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" :propsTabsSlidingFixedStyle="sliding_fixed_style" @onComputerHeight="tabs_height_event" @onTabsTap="tabs_click_event"></component-diy-tabs>
<view :style="carousel_margin_top">
<view :style="carousel_container">
<view :style="carousel_img_container">
@ -100,6 +100,7 @@
swiper_bg_style: '',
swiper_bg_img_style: '',
swiper_bg_img_style_null: `background-image: url('')`,
sliding_fixed_style: '',
is_rotating_background: false,
new_is_tabs_safe_distance: false,
};
@ -172,6 +173,7 @@
},
swiper_bg_style: this.get_swiper_bg_style(new_content, 0),
swiper_bg_img_style: this.get_swiper_bg_img_style(new_content, 0),
sliding_fixed_style: this.get_sliding_fixed_style(new_content, 0),
});
},
// tab点击
@ -186,6 +188,26 @@
video_play(url, popup_width, popup_height) {
this.$emit('onVideoPlay', url, popup_width, popup_height);
},
get_sliding_fixed_style(form, actived_index) {
const style = form?.carousel_list?.[actived_index]?.style;
if (style && !isEmpty(style.color_list)) {
const color_list = style.color_list;
const list = color_list.filter((item) => !isEmpty(item.color));
if (list.length > 0) {
try {
if (style.background_img.length > 0) {
return `background: linear-gradient(90deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 0%) 0%)`;
} else {
return gradient_computer(style);
}
} catch (error) {
return '';
}
}
return '';
}
return '';
},
get_swiper_bg_style(form, actived_index) {
const style = form?.carousel_list?.[actived_index]?.style;
if (style && !isEmpty(style.color_list)) {
@ -222,6 +244,7 @@
actived_index: index,
swiper_bg_style: this.get_swiper_bg_style(this.propValue.content || {}, index),
swiper_bg_img_style: this.get_swiper_bg_img_style(this.propValue.content || {}, index),
sliding_fixed_style: this.get_sliding_fixed_style(this.propValue.content || {}, index),
});
},
},

28
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" :propsIsTabsMagic="true" :propsTabsMagicStyle="tabs_magic_value_common_style" @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" :propsTabsSlidingFixedStyle="sliding_fixed_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">
@ -162,6 +162,7 @@
swiper_bg_style: '',
swiper_bg_img_style: '',
swiper_bg_img_style_null: `background-image: url('')`,
sliding_fixed_style: '',
new_is_tabs_safe_distance: false,
diy_key: '',
new_tabs_data_list: [],
@ -318,6 +319,7 @@
this.setData({
swiper_bg_style: this.get_swiper_bg_style(0),
swiper_bg_img_style: this.get_swiper_bg_img_style(0),
sliding_fixed_style: this.get_sliding_fixed_style(0),
})
}, 100);
},
@ -331,6 +333,7 @@
this.setData({
swiper_bg_style: this.get_swiper_bg_style(0),
swiper_bg_img_style: this.get_swiper_bg_img_style(0),
sliding_fixed_style: this.get_sliding_fixed_style(0),
})
}, 100);
this.$emit('onTabsTap', tabs_id, is_micro_page);
@ -343,6 +346,28 @@
video_play(url, popup_width, popup_height) {
this.$emit('onVideoPlay', url, popup_width, popup_height);
},
get_sliding_fixed_style(actived_index) {
if (this.tabs_magic_type == 'carousel') {
const style = this.tabs_magic_value.content?.carousel_list?.[actived_index]?.style;
if (style && !isEmpty(style.color_list)) {
const color_list = style.color_list;
const list = color_list.filter((item) => !isEmpty(item.color));
if (list.length > 0) {
try {
if (style.background_img.length > 0) {
return `background: linear-gradient(90deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 0%) 0%)`;
} else {
return gradient_computer(style);
}
} catch (error) {
return '';
}
}
return '';
}
}
return '';
},
get_swiper_bg_style(actived_index) {
if (this.tabs_magic_type == 'carousel') {
const style = this.tabs_magic_value.content?.carousel_list?.[actived_index]?.style;
@ -383,6 +408,7 @@
actived_index: index,
swiper_bg_style: this.get_swiper_bg_style(index),
swiper_bg_img_style: this.get_swiper_bg_img_style(index),
sliding_fixed_style: this.get_sliding_fixed_style(index),
});
},
goods_buy_event(index, goods = {}, params = {}, back_data = null) {

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

@ -5,7 +5,8 @@
<view :style="style_margin_container">
<view class="tabs-contents bs-bb pr" :style="style_container">
<view :class="top_up == '1' ? 'bs-bb' : 'wh-auto bs-bb'" :style="style_img_container">
<component-diy-modules-tabs-view :propKey="propKey" :propValue="tabs_data" :propIsTabsIcon="true" :propTop="propTop" :propsTabsContainer="propsTabsContainer + (propIsRotatingBackground ? propBgStyle : '')" :propIsRotatingBackground="propIsRotatingBackground" :propBgImgStyle="propBgImgStyle" :propsTabsImgContainer="propsTabsImgContainer" :propStyle="propStyle" :propTabsSlidingFixedBg="tabs_sliding_fixed_bg" @onTabsTap="tabs_click_event" @tabsZindex="tabsZindex"></component-diy-modules-tabs-view>
{{ propIsRotatingBackground }}
<component-diy-modules-tabs-view :propKey="propKey" :propValue="tabs_data" :propIsTabsIcon="true" :propTop="propTop" :propsTabsContainer="propsTabsContainer + (propIsRotatingBackground ? propBgStyle : '')" :propIsRotatingBackground="propIsRotatingBackground" :propBgImgStyle="propBgImgStyle" :propsTabsImgContainer="propsTabsImgContainer" :propStyle="propStyle" :propTabsSlidingFixedBg="tabs_sliding_fixed_bg" :propsTabsSlidingFixedStyle="propIsRotatingBackground ? propsTabsSlidingFixedStyle : ''" @onTabsTap="tabs_click_event" @tabsZindex="tabsZindex"></component-diy-modules-tabs-view>
</view>
</view>
</view>
@ -106,6 +107,10 @@
type: String,
default: ''
},
propsTabsSlidingFixedStyle: {
type: String,
default: ''
},
propsIsTabsMagic: {
type: Boolean,
default: false