From 49ebe1bb9b0cef3bf5480de0fc8b32cf2c0dbb4a Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Thu, 26 Dec 2024 16:00:14 +0800
Subject: [PATCH] =?UTF-8?q?1.diy=E6=BB=9A=E5=8A=A8=E7=9B=91=E5=90=AC?=
=?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
components/diy/article-tabs.vue | 12 +++----
components/diy/diy.vue | 61 ++++++++++++++++++++-------------
components/diy/goods-tabs.vue | 13 +++----
components/diy/header.vue | 40 ++++++++++-----------
4 files changed, 64 insertions(+), 62 deletions(-)
diff --git a/components/diy/article-tabs.vue b/components/diy/article-tabs.vue
index 79f990f0..987e6856 100644
--- a/components/diy/article-tabs.vue
+++ b/components/diy/article-tabs.vue
@@ -109,13 +109,9 @@
if (new_tabs_background_img.length > 0) {
new_tabs_background_img += 'background-position: top left;';
}
- this.setData({
- tabs_background: (new_tabs_background.length > 0 ? new_tabs_background : 'background:#fff;') + new_tabs_background_img,
- });
+ this.tabs_background = (new_tabs_background.length > 0 ? new_tabs_background : 'background:#fff;') + new_tabs_background_img;
} else {
- this.setData({
- tabs_background: 'background:transparent',
- });
+ this.tabs_background = 'background:transparent';
}
},
propKey(val) {
@@ -181,14 +177,14 @@
direction: tabs_bg_direction,
background_img_style: tabs_bg_background_img_style,
background_img: tabs_bg_background_img,
- }
+ };
// 文章区域背景设置
const article_content_data = {
color_list: article_content_color_list,
direction: article_content_direction,
background_img_style: article_content_background_img_style,
background_img: article_content_background_img,
- }
+ };
this.setData({
top_up: new_content.tabs_top_up,
article_tabs: new_data,
diff --git a/components/diy/diy.vue b/components/diy/diy.vue
index a02d2087..3679ca74 100644
--- a/components/diy/diy.vue
+++ b/components/diy/diy.vue
@@ -252,6 +252,9 @@
data_alone_row_space: 0,
content_padding: '',
outer_container_padding: 0,
+
+ // 滚动延迟器
+ scroll_throttle_timeout: null,
};
},
watch: {
@@ -288,7 +291,7 @@
// 初始化
init() {
- const { header = {}, diy_data = [], tabs_data = []} = this.propValue;
+ const { header = {}, diy_data = [], tabs_data = [] } = this.propValue;
let header_style = header.com_data.style;
let new_diy_index = 0;
let new_tabs_data = [];
@@ -303,7 +306,7 @@
new_diy_data = diy_data;
} else {
new_tabs_data = tabs_data;
- // 过滤数据
+ // 过滤数据
diy_data.forEach((item) => {
// 判断是否是商品列表
if (item.com_name == 'float-window') {
@@ -316,7 +319,7 @@
}
});
}
- const { padding_right = 0, padding_left = 0} = header.com_data.style.common_style;
+ const { padding_right = 0, padding_left = 0 } = header.com_data.style.common_style;
// tabs选项卡数据过滤
this.setData({
header_data: header,
@@ -326,7 +329,7 @@
page_style: common_styles_computer(header.com_data.style.common_style),
page_img_style: background_computer(header.com_data.style.common_style),
// 内间距
- content_padding: `padding: 0px ${padding_right}px 0px ${padding_left}px;` +'box-sizing:border-box;',
+ content_padding: `padding: 0px ${padding_right}px 0px ${padding_left}px;` + 'box-sizing:border-box;',
outer_container_padding: padding_right + padding_left,
// 判断顶部导航是否置顶
is_header_top: parseInt(header.com_data.style.up_slide_display) == 1 ? true : false,
@@ -563,27 +566,37 @@
// 页面滚动事件
on_scroll_event(e) {
- this.setData({
- scroll_top: e.detail.scrollTop,
- });
- // 判断顶部导航是否置顶
- // #ifdef H5 || MP-TOUTIAO
- if (!this.is_header_top) {
- if (e.detail.scrollTop >= this.sticky_top + 33 + (this.is_search_alone_row ? 0 : 33 + this.data_alone_row_space)) {
- this.setData({
- temp_sticky_top: 0,
- temp_header_top: 0,
- temp_is_header_top: true,
- });
- } else {
- this.setData({
- temp_header_top: this.header_top,
- temp_sticky_top: this.sticky_top,
- temp_is_header_top: false,
- });
- }
+ const scroll_num = e.detail.scrollTop;
+ if ((scroll_num - 20) / (this.sticky_top + 33) <= 1.5) {
+ // 更新数据的逻辑
+ this.scroll_top = scroll_num;
+ }
+ this.scroll_timer_compute(scroll_num);
+ },
+
+ scroll_timer_compute(scroll_num) {
+ // 使用节流技术减少事件触发的处理次数
+ if (!this.scroll_throttle_timeout) {
+ const self = this;
+ this.scroll_throttle_timeout = setTimeout(() => {
+ // 判断顶部导航是否置顶
+ // #ifdef H5 || MP-TOUTIAO
+ if (!self.is_header_top) {
+ if (scroll_num >= self.sticky_top + 33 + (self.is_search_alone_row ? 0 : 33 + self.data_alone_row_space)) {
+ self.temp_sticky_top = 0;
+ self.temp_header_top = 0;
+ self.temp_is_header_top = true;
+ } else {
+ self.temp_header_top = self.header_top;
+ self.temp_sticky_top = self.sticky_top;
+ self.temp_is_header_top = false;
+ }
+ }
+ // #endif
+ // 清除定时器
+ this.scroll_throttle_timeout = null;
+ }, 10); // 可以根据实际情况调整延时时间
}
- // #endif
},
// 底部菜单高度
diff --git a/components/diy/goods-tabs.vue b/components/diy/goods-tabs.vue
index 6fcef15a..2d32a67d 100644
--- a/components/diy/goods-tabs.vue
+++ b/components/diy/goods-tabs.vue
@@ -107,13 +107,9 @@
if (new_tabs_background_img.length > 0) {
new_tabs_background_img += 'background-position: top left;';
}
- this.setData({
- tabs_background: (new_tabs_background.length > 0 ? new_tabs_background : 'background:#fff;') + new_tabs_background_img,
- });
+ this.tabs_background = (new_tabs_background.length > 0 ? new_tabs_background : 'background:#fff;') + new_tabs_background_img;
} else {
- this.setData({
- tabs_background: 'background:transparent',
- });
+ this.tabs_background = 'background:transparent';
}
},
propKey(val) {
@@ -167,7 +163,6 @@
}
let common_style = Object.assign({}, new_style.common_style, {
padding_top: 0,
-
});
const { tabs_bg_color_list = [], tabs_bg_direction = '', tabs_bg_background_img_style = '', tabs_bg_background_img = [], tabs_radius = this.old_radius, tabs_padding = this.old_padding, shop_content_color_list = [], shop_content_direction = '', shop_content_background_img_style = '', shop_content_background_img = [], shop_content_margin = this.old_margin, shop_content_padding = this.old_padding, shop_content_radius = this.old_radius } = new_style;
// 选项卡背景设置
@@ -176,14 +171,14 @@
direction: tabs_bg_direction,
background_img_style: tabs_bg_background_img_style,
background_img: tabs_bg_background_img,
- }
+ };
// 商品区域背景设置
const shop_content_data = {
color_list: shop_content_color_list,
direction: shop_content_direction,
background_img_style: shop_content_background_img_style,
background_img: shop_content_background_img,
- }
+ };
this.setData({
top_up: new_content.tabs_top_up,
goods_tabs: new_data,
diff --git a/components/diy/header.vue b/components/diy/header.vue
index 22461221..c6003a48 100644
--- a/components/diy/header.vue
+++ b/components/diy/header.vue
@@ -30,7 +30,7 @@
-
+
@@ -141,7 +141,7 @@
componentDiySearch,
imageEmpty,
componentChoiceLocation,
- componentBadge
+ componentBadge,
},
data() {
return {
@@ -210,14 +210,12 @@
// 背景图
const back = { background_img: up_slide_background_img, background_img_style: up_slide_background_img_style };
const up_slide_opacity = 'opacity:' + ((newVal - 20) / (this.header_top + 33) > 1 ? 1 : ((newVal - 20) / (this.header_top + 33)).toFixed(2)) + ';';
- this.setData({
- up_slide_opacity: up_slide_opacity,
- // 原来的logo要比新的隐藏的快，所以要比原来的logo快一点
- up_slide_old_logo_style: 'opacity:' + ((newVal - 5) / (this.header_top + 33) > 1 ? 0 : (1 - (newVal - 5) / (this.header_top + 33)).toFixed(2)) + ';',
- // 20是大小误差
- up_slide_style: gradient_computer(gradient) + up_slide_opacity,
- up_slide_img_style: background_computer(back),
- });
+ this.up_slide_opacity = up_slide_opacity;
+ // 来的logo要比新的隐藏的快，所以要比原来的logo快一点
+ this.up_slide_old_logo_style = 'opacity:' + ((newVal - 5) / (this.header_top + 33) > 1 ? 0 : (1 - (newVal - 5) / (this.header_top + 33)).toFixed(2)) + ';';
+ // =0是大小误差
+ this.up_slide_style = gradient_computer(gradient) + up_slide_opacity;
+ this.up_slide_img_style = background_computer(back);
}
},
propKey(val) {
@@ -262,7 +260,7 @@
new_text_style += `right:-${custom.width + 10}px;`;
// #endif
// #endif
- const { location_margin = this.old_margin } = new_style;
+ 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;',
@@ -287,7 +285,7 @@
});
this.$emit('onImmersionModelCallBack', this.is_immersion_model);
},
- get_location_name_style (new_content) {
+ get_location_name_style(new_content) {
const is_search_alone_row = new_content.data_alone_row_value && new_content.data_alone_row_value.includes('search');
const is_icon_alone_row = new_content.data_alone_row_value && new_content.data_alone_row_value.includes('icon');
let width = 0;
@@ -297,34 +295,34 @@
width = 100;
}
if (new_content.theme == '4') {
- return `${ (150 + width) * 2 }rpx;`;
+ return `${(150 + width) * 2}rpx;`;
} else {
- return `${ (100 + width) * 2 }rpx;`;
+ return `${(100 + width) * 2}rpx;`;
}
},
// 定位设置
get_style_location_container(new_style) {
- const { location_margin = this.old_margin, location_radius = this.old_radius} = new_style;
+ const { location_margin = this.old_margin, location_radius = this.old_radius } = new_style;
const style = {
color_list: new_style?.location_color_list || [],
direction: new_style?.location_direction || '',
- }
+ };
const height = 32 - location_margin.margin_top - location_margin.margin_bottom;
- return gradient_computer(style) + radius_computer(location_radius) + `height: ${ height * 2}rpx;line-height: ${height * 2}rpx;`;
+ return gradient_computer(style) + radius_computer(location_radius) + `height: ${height * 2}rpx;line-height: ${height * 2}rpx;`;
},
// 背景图片
- get_style_location_img_container(new_style){
+ get_style_location_img_container(new_style) {
const { location_background_img = [], location_background_img_style = '2', location_border_show = '0', location_padding = this.old_padding, location_margin = this.old_margin, location_border_size = this.old_padding, location_border_color = '', location_border_style = 'solid' } = new_style;
const style = {
background_img: location_background_img,
background_img_style: location_background_img_style,
- }
+ };
let border = ``;
if (location_border_show == '1') {
- border += `border-width: ${location_border_size.padding_top}px ${location_border_size.padding_right}px ${location_border_size.padding_bottom}px ${location_border_size.padding_left}px;border-style: ${ location_border_style };border-color: ${location_border_color};`
+ border += `border-width: ${location_border_size.padding_top}px ${location_border_size.padding_right}px ${location_border_size.padding_bottom}px ${location_border_size.padding_left}px;border-style: ${location_border_style};border-color: ${location_border_color};`;
}
const height = 32 - (location_margin.margin_top || 0) - (location_margin.margin_bottom || 0);
- return background_computer(style) + padding_computer(location_padding) + border + `height: ${ height * 2}rpx;line-height: ${height * 2}rpx;box-sizing: border-box;`;
+ return background_computer(style) + padding_computer(location_padding) + border + `height: ${height * 2}rpx;line-height: ${height * 2}rpx;box-sizing: border-box;`;
},
// 获取顶部导航高度
get_nav_height() {