From 3884d64bc7b99cdfaece708c68251026168c10d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Wed, 12 Feb 2025 18:04:40 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2=E6=98=BE?=
=?UTF-8?q?=E7=A4=BA=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
components/diy/diy.vue | 43 ++++++++++++++++++----------
components/diy/header.vue | 2 +-
components/diy/modules/tabs-view.vue | 19 ++++++++++--
components/diy/tabs-carousel.vue | 9 ++++--
components/diy/tabs.vue | 36 ++++++++++++++++-------
components/popup/popup.vue | 20 ++++++-------
6 files changed, 89 insertions(+), 40 deletions(-)
diff --git a/components/diy/diy.vue b/components/diy/diy.vue
index df9905c1..2a45062a 100644
--- a/components/diy/diy.vue
+++ b/components/diy/diy.vue
@@ -7,11 +7,11 @@
-
+
-
-
+
+
@@ -208,6 +208,7 @@
// #endif
header_top: '',
temp_sticky_top: 0,
+ temp_sticky_no_h5_top: 0,
temp_header_top: '0px',
is_header_top: false,
temp_is_header_top: false,
@@ -275,6 +276,15 @@
return this.temp_header_top;
}
},
+ get_tabs_data_prop_sticky_top() {
+ // 开启了沉浸式时的处理
+ if (this.is_immersion_model) {
+ // 并且开启了安全距离
+ return this.is_the_safe_distance_enabled ? this.temp_sticky_top : 0;
+ } else {
+ return this.temp_sticky_top;
+ }
+ },
get_prop_index() {
return (item) => {
return this.is_the_safe_distance_enabled && this.tabs_data.length == 0 ? item.index : -1;
@@ -283,7 +293,7 @@
get_diy_prop_top() {
// 不开启沉浸模式时的处理
if (!this.is_immersion_model) {
- return this.temp_sticky_top + this.tabs_height;
+ return this.temp_sticky_no_h5_top + this.tabs_height;
} else {
// 开启沉浸模式且开启选项卡置顶时
if (this.is_tabs_data_topped) {
@@ -291,7 +301,7 @@
} else {
// 开启安全距离
if (this.is_the_safe_distance_enabled) {
- return this.is_header_top ? this.temp_sticky_top : 0;
+ return this.is_header_top ? this.temp_sticky_no_h5_top : 0;
} else {
return 0;
}
@@ -389,7 +399,7 @@
}
const { padding_right = 0, padding_left = 0 } = header_style.common_style;
const new_is_search_alone_row = header.com_data.content.data_alone_row_value.length > 0 ? true : false;
- const new_data_alone_row_space = parseInt(header_style.data_alone_row_space || 5);
+ const new_data_alone_row_space = parseInt(header_style.data_alone_row_space || 0);
// tabs选项卡数据过滤
this.setData({
header_data: header,
@@ -405,8 +415,9 @@
is_header_top: parseInt(header_style.up_slide_display) == 1 ? true : false,
is_tabs_data_topped: new_tabs_data[0]?.com_data?.content?.tabs_top_up == '1' || false,
temp_sticky_top: this.sticky_top,
- temp_header_top: this.sticky_top + (new_is_search_alone_row ? 66 + new_data_alone_row_space : 33),
- header_top: this.sticky_top + (new_is_search_alone_row ? 66 + new_data_alone_row_space : 33),
+ temp_sticky_no_h5_top: this.sticky_top,
+ temp_header_top: (new_is_search_alone_row ? 66 + new_data_alone_row_space : 33),
+ header_top: (new_is_search_alone_row ? 66 + new_data_alone_row_space : 33),
is_immersion_model: header_style.header_background_type !== 'color_image' && header_style.immersive_style == '1',
// 顶部导航高度是否变化--------------------------------------------------
is_search_alone_row: new_is_search_alone_row,
@@ -431,10 +442,7 @@
let new_data = JSON.parse(JSON.stringify(item));
// 顶部导航的高度
let header_top_height = (header.com_data.content.data_alone_row_value.length > 0 ? parseInt(header.com_data.style.data_alone_row_space || 5) : 0) + 33 + (header.com_data.content.data_alone_row_value.length > 0 ? 33 : 0);
- // 选项卡和选项卡轮播置顶时不需要加入安全距离
- // if (!(new_data.com_data.content.tabs_top_up == '1' && ['tabs', 'tabs-carousel'].includes(new_data.key))) {
- new_data.com_data.style.common_style.padding_top = parseInt(new_data.com_data.style.common_style.padding_top) + header_top_height;
- // }
+ new_data.com_data.style.common_style.padding_top = parseInt(new_data.com_data.style.common_style.padding_top) + header_top_height;
return new_data;
}
return item;
@@ -659,21 +667,26 @@
this.head_scroll_top = this.sticky_top + 100;
}
}
-
// 判断顶部导航是否置顶
- // #ifdef H5 || MP-TOUTIAO
if (!this.is_header_top) {
if (scroll_num >= this.sticky_top + 33 + (this.is_search_alone_row ? 0 : 33 + this.data_alone_row_space)) {
this.temp_sticky_top = 0;
+ // #ifdef H5
this.temp_header_top = 0;
+ this.temp_sticky_no_h5_top = 0;
+ // #endif
+ // #ifndef H5
+ this.temp_header_top = this.sticky_top;
+ this.temp_sticky_no_h5_top = this.sticky_top;
+ // #endif
this.temp_is_header_top = true;
} else {
this.temp_header_top = this.header_top;
this.temp_sticky_top = this.sticky_top;
+ this.temp_sticky_no_h5_top = this.sticky_top;
this.temp_is_header_top = false;
}
}
- // #endif
this.scroll_timer_compute(scroll_num);
},
diff --git a/components/diy/header.vue b/components/diy/header.vue
index 881ad147..49ead853 100644
--- a/components/diy/header.vue
+++ b/components/diy/header.vue
@@ -268,7 +268,7 @@
const { location_margin = this.old_margin } = new_style;
this.setData({
form: this.propValue,
- position: new_style.up_slide_display == '1' ? 'position:fixed;' : new_style.immersive_style === '1' ? 'position:absolute;' : 'position:reactive;',
+ position: new_style.up_slide_display == '1' ? 'position:fixed;' : new_style.immersive_style === '1' ? 'position:absolute;' : 'position:relative;',
is_positon_realative: new_style.up_slide_display == '1' ? false : true,
roll_style: new_roll_style,
roll_img_style: new_roll_img_style,
diff --git a/components/diy/modules/tabs-view.vue b/components/diy/modules/tabs-view.vue
index 4adff2bb..7bd7122e 100644
--- a/components/diy/modules/tabs-view.vue
+++ b/components/diy/modules/tabs-view.vue
@@ -54,7 +54,7 @@
-
+
全部选项卡
@@ -177,6 +177,17 @@
tabs_sticky: '',
tabs_height: '100%',
tabs_adorn_img_style: '',
+ // #ifdef MP
+ sticky_top: bar_height,
+ // #endif
+ // #ifdef H5 || MP-TOUTIAO
+ sticky_top: bar_height,
+ // #endif
+ // #ifdef APP
+ sticky_top: bar_height,
+ // #endif
+ newPropTop: '',
+ newPropStyle: '',
// 默认数据
old_radius: { radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0 },
old_padding: { padding: 0, padding_top: 0, padding_bottom: 0, padding_left: 0, padding_right: 0 },
@@ -255,11 +266,13 @@
// 参数设置
this.setData({
form: new_content,
+ newPropTop: `calc(${ this.sticky_top * 2}rpx);`,
+ newPropStyle: `padding-top: ${ this.sticky_top * 2 }rpx;margin-top: -${ this.sticky_top * 2 }rpx;`,
new_style: new_style,
tabs_spacing: Number(new_style.tabs_spacing),
tabs_sign_spacing: !isEmpty(new_style.tabs_sign_spacing) ? `margin-top: ${new_style.tabs_sign_spacing * 2}rpx;` : 'margin-top: 8rpx;',
tabs_list: new_content.tabs_list,
- tabs_padding_bottom: this.get_padding_bottom(new_content, new_style),
+ tabs_padding_bottom: this.get_padding_bottom(new_content, new_style) + 'z-index: 11;',
// 选项卡主题
tabs_theme: this.get_tabs_theme(new_content),
tabs_theme_index: new_content.tabs_theme,
@@ -328,12 +341,14 @@
},
// 分类选择事件
category_check_event() {
+ this.$emit('tabsZindex', 13)
this.setData({
popup_status: true,
});
},
// 关闭分类选择事件
quick_close_event(e) {
+ this.$emit('tabsZindex', 11)
this.setData({
popup_status: false,
});
diff --git a/components/diy/tabs-carousel.vue b/components/diy/tabs-carousel.vue
index f950a845..f52c21c6 100644
--- a/components/diy/tabs-carousel.vue
+++ b/components/diy/tabs-carousel.vue
@@ -2,7 +2,7 @@
-
+
@@ -34,6 +34,10 @@
type: [String, Number],
default: 0,
},
+ propStickyTop: {
+ type: Number,
+ default: 0,
+ },
// 是否导航栏置顶
propNavIsTop: {
type: Boolean,
@@ -67,6 +71,7 @@
return {
style_container: '',
style_img_container: '',
+ style_margin_container: '',
spacing_common_style: {
padding: 0,
padding_top: 0,
@@ -139,7 +144,7 @@
carousel_img_container: background_computer(carousel_content_data) + padding_computer(carousel_content_padding) + 'box-sizing: border-box;overflow: hidden;',
spacing_common_style: {
padding: 0,
- padding_top: new_style.common_style.padding_top,
+ padding_top: new_style.common_style.padding_top + this.propStickyTop,
padding_bottom: 0,
padding_left: new_style.common_style.padding_left,
padding_right: new_style.common_style.padding_right,
diff --git a/components/diy/tabs.vue b/components/diy/tabs.vue
index 68e0d674..1ef9d889 100644
--- a/components/diy/tabs.vue
+++ b/components/diy/tabs.vue
@@ -1,11 +1,11 @@
-
+
-
+
-
+
@@ -34,6 +34,10 @@
type: [String, Number],
default: '0',
},
+ propStickyTop: {
+ type: Number,
+ default: 0,
+ },
// 是否导航栏置顶
propNavIsTop: {
type: Boolean,
@@ -100,7 +104,8 @@
tabs_carousel_seat_height: 0,
// 置顶时，选项卡样式
tabs_top_style: '',
- style_margin_top: '',
+ style_margin_container: '',
+ tabs_z_index: ''
};
},
created() {
@@ -123,6 +128,10 @@
propTop(val) {
this.init();
},
+ propStickyTop(val) {
+ console.log(val);
+ this.init();
+ },
propKey(val) {
// 初始化
this.init();
@@ -142,13 +151,13 @@
// 判断选项卡是否置顶
let other_style = this.propTop;
- let new_tabs_top_style = this.propNavIsTop || this.propTabsIsTop || new_content.tabs_top_up == '1' ? (new_content.tabs_top_up == '1' ? 'top:calc(' + other_style + 'px);z-index:11;' : '') : '';
+ let new_tabs_top_style = this.propNavIsTop || this.propTabsIsTop || new_content.tabs_top_up == '1' ? (new_content.tabs_top_up == '1' ? 'top:calc(' + (this.propStickyTop > 0 ? this.propStickyTop + 'px +' : '') + other_style * 2 + 'rpx);z-index:11;' : '') : '';
let new_top_up = new_content.tabs_top_up;
// #ifdef H5 || MP-TOUTIAO
if (this.propTabsIsTop) {
other_style = '0';
}
- new_tabs_top_style = 'top:calc(' + other_style + 'px);z-index:11;';
+ new_tabs_top_style = 'top:calc(' + (this.propStickyTop > 0 ? this.propStickyTop + 'px +' : '') + other_style * 2 + 'rpx);z-index:11;';
new_top_up = this.propNavIsTop || this.propTabsIsTop ? new_content.tabs_top_up : '0';
// #endif
let tabs_bg = new_style.common_style.color_list;
@@ -156,16 +165,18 @@
if (!Array.isArray(tabs_bg) || tabs_bg.length === 0 || !tabs_bg[0] || !tabs_bg[0].color) {
new_tabs_background = 'background:#fff;';
}
+ const newPropTop = app.globalData.rpx_to_px(this.propTop * 2);
this.setData({
tabs_data: new_tabs_data,
style_container: 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) : '', // 如果是选项卡轮播，不需要走默认样式
// 如果开了滑动置顶，并且开了沉浸式，不需要走传递过来的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, true) + 'box-sizing: border-box;' : '', // 如果是选项卡轮播，不需要走默认样式
tabs_top_style: new_tabs_top_style,
- // 沉浸模式下并且开通了安全距离 会显示-的margin
- style_margin_top: this.propIsImmersionModel ? `margin-top: -${ this.propTop * 2 }rpx;` : '',
+ // 沉浸模式下并且开通了安全距离 会显示-的margin, this.propStickyTop - 10是因为他将头部的下边距也加上了，需要减去这部分值，确保他在头部的下边距下边
+ style_margin_container: this.propIsImmersionModel ? `margin-top: -${ newPropTop + this.propStickyTop }px;` : '',
// 判断是否置顶
top_up: new_top_up,
+ tabs_z_index: 'z-index: 11;'
});
},
// 获取选项卡高度
@@ -180,8 +191,8 @@
if ((res || null) != null) {
// data包含元素的宽度、高度等信息
this.setData({
- tabs_seat_height: res.height + (this.propIsImmersionModel ? this.propTop : 0),
- tabs_carousel_seat_height: (res.height + (this.propIsImmersionModel ? this.propTop : 0)) - this.propSpacingCommonStyle.padding_top - this.propSpacingCommonStyle.margin_top, // 轮播选项卡置顶时去掉顶部间距
+ tabs_seat_height: res.height + (this.propIsImmersionModel ? this.propTop + this.propStickyTop : 0),
+ tabs_carousel_seat_height: (res.height + (this.propIsImmersionModel ? this.propTop + this.propStickyTop : 0)) - this.propSpacingCommonStyle.padding_top - this.propSpacingCommonStyle.margin_top, // 轮播选项卡置顶时去掉顶部间距
});
this.$emit('onComputerHeight', this.tabs_seat_height);
}
@@ -191,6 +202,11 @@
this.$emit('onComputerHeight', 0);
}
},
+ tabsZindex(val) {
+ this.setData({
+ tabs_z_index: `z-index: ${ val };`
+ });
+ },
// 选项卡回调
tabs_click_event(index, item) {
let tabs_id = '';
diff --git a/components/popup/popup.vue b/components/popup/popup.vue
index a0895d8f..7e4b90dc 100644
--- a/components/popup/popup.vue
+++ b/components/popup/popup.vue
@@ -2,7 +2,7 @@
-
+
@@ -99,16 +99,16 @@
);
},
// 初初始化处理
- init_handle() {
- var tabbar_height = 0;
+ init_handle() {
+ var tabbar_height = 0;
if(this.propPosition == 'bottom') {
- // 弹窗从底部弹出，获取底部菜单高度、如果当前为底部菜单页面则增加底部间距
- if(app.globalData.data.is_use_native_tabbar != 1 && app.globalData.is_tabbar_pages()) {
- tabbar_height = (app.globalData.app_system_tabbar_height_value()*2)+20;
- } else {
- var height = (app.globalData.current_page(false) == 'pages/diy/diy') ? app.globalData.app_diy_tabbar_height_value() : 0;
- tabbar_height = (height > 0) ? (height*2)+20 : 0;
- }
+ // 弹窗从底部弹出，获取底部菜单高度、如果当前为底部菜单页面则增加底部间距
+ if(app.globalData.data.is_use_native_tabbar != 1 && app.globalData.is_tabbar_pages()) {
+ tabbar_height = (app.globalData.app_system_tabbar_height_value()*2)+20;
+ } else {
+ var height = (app.globalData.current_page(false) == 'pages/diy/diy') ? app.globalData.app_diy_tabbar_height_value() : 0;
+ tabbar_height = (height > 0) ? (height*2)+20 : 0;
+ }
}
// 左边距位置处理