1.diy滚动监听优化

2024-12-26 16:00:14 +08:00 · 2024-12-26 16:00:14 +08:00 · 49ebe1bb9b
parent 7f972fcaf6
commit 49ebe1bb9b
4 changed files with 64 additions and 62 deletions
--- 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,
--- 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
            },

            // 底部菜单高度
--- 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,
--- a/components/diy/header.vue
+++ b/components/diy/header.vue
@ -30,7 +30,7 @@
                                                                <view v-if="(propScrollTop - 5) / (header_top + 33) < 1" class="logo-style" :style="up_slide_old_logo_style">
                                                                    <image class="logo-style" :src="form.content.logo[0].url" mode="heightFix" />
                                                                </view>
-                                                                <view :class="['logo-style left-0', {'pa': (propScrollTop - 5) / (header_top + 33) < 1 }]" :style="'opacity:0;' + up_slide_opacity">
+                                                                <view :class="['logo-style left-0', { pa: (propScrollTop - 5) / (header_top + 33) < 1 }]" :style="'opacity:0;' + up_slide_opacity">
                                                                    <image class="logo-style" :src="form.style.up_slide_logo[0].url" mode="heightFix" />
                                                                </view>
                                                            </template>
@ -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() {