存在于组件中的uni-notice-bar的text值动态更新后在h5中不会滚动

[easyatm]

trafficstars

发行方式

None

具体平台

微信小程序中正常.

下面H5页面都异常. chrome 135.0.7049.115 HBuilder X 4.57 内置WEB浏览器 Edge 135.0.3179.85

开发环境

Windows

项目创建方式

HBuilderX

依赖版本

HBuilder X 4.57

问题描述

在A页面与B页面都引用了MyNotice.vue(A与B均为tabBar页面) 在A页面改变getApp().globalData.notice值后,到B页面中看MyNotice的文本不会滚动也不显示,从开发者工具中查看html元素值是已修改的,两个页面都收到了值变化通知. 只是不显示也不会滚动. 同样,在B页面改变getApp().globalData.notice值时,在A页面也不会滚动. 微信小程序中是正常的.

自定义MyNotice代码

<template>
    <uni-notice-bar class="MyNotice" show-icon scrollable :text="noticeText" />

</template>

<script>
export default {
    options: {
        styleIsolation: 'shared'
    }
}
</script>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const redraw_count = ref(0);

const noticeText = ref(getApp().globalData.notice);

const onNoticeChanged = (val) => {
    noticeText.value = getApp().globalData.notice
    console.log("公告改变:"+noticeText.value);
}
onMounted(() => {
    uni.$on('notice-changed', onNoticeChanged)
})
onUnmounted(() => {
    uni.$off('notice-changed', onNoticeChanged)
})

console.log(getApp().globalData.notice);
</script>

<style lang="scss" scoped>
.MyNotice {
    margin-bottom: 0px;
    /* padding: 5px; */

    ::v-deep .uni-noticebar {
        margin-bottom: 0px;
        padding: 5px;
    }
}
</style>````

### 重现步骤

要先进入过A页面与B页面
如果只进入了A页面,没有进入B
在A中改变值时, 进入B后是正常的

### 期望行为

_No response_

### 实际行为

_No response_

### 截图或录屏

_No response_

[chouchouji]

您好，方便发个完整的可复现demo吗？以便更好的排查问题

[easyatm]

您好，方便发个完整的可复现demo吗？以便更好的排查问题

我在代码中已经解决了,没有可复现的了 问题确定了. 在tabar页面中引用自定义的uni-notice-bar(MyNotice)时(不确定直接引用uni-notice-bar有没有这个问题) 页面在后台(隐藏)时,动态更新text就不会滚动, 目前的解决方式是 当在隐藏状态时动态更新了text, 在onShow中重绘uni-notice-bar即可

这是修正可用的代码:

<template>
    <uni-notice-bar v-if="ReDraw" class="MyNotice" show-icon showGetMore scrollable :text="noticeText"
        :backgroundColor="backgroundColor" :color="color" :moreColor="color" @click="onClick" />
</template>

<script>
export default {
    options: {
        styleIsolation: 'shared'
    },
    props: {
        color: {
            type: String,
            default: '#FF9A43'
        },
        backgroundColor: {
            type: String,
            default: "#FFF9EA"
        }
    }

}
</script>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

import { onShow, onHide } from '@dcloudio/uni-app'

const onClick = () => {
    uni.navigateTo({ url: '/pages/pageNotice/pageNotice' });
}

const ReDraw = ref(true);

const noticeText = ref(getApp().globalData.noticeTitle);

let isChanged = false;

let isVisable = true;

onShow(() => {
    ReDraw.value = true;
    isVisable = true;
})

onHide(() => {
    isVisable = false;
})

//公告消息已经改变了
const onNoticeChanged = (val) => {
    noticeText.value = getApp().globalData.noticeTitle
    console.log("公告改变:" + noticeText.value);

    //如果页面是隐藏状态则设置重绘标志
    if (!isVisable) {
        console.log("需要重绘");
        ReDraw.value = false;
    } else {
        console.log("不用重绘");
    }
}

onMounted(() => {
    uni.$on('notice-changed', onNoticeChanged)
})
onUnmounted(() => {
    uni.$off('notice-changed', onNoticeChanged)
})

</script>

<style lang="scss" scoped>
.MyNotice {
    margin-bottom: 0px;
    /* padding: 5px; */

    ::v-deep .uni-noticebar {
        margin-bottom: 0px;
        padding: 5px;
    }
}
</style>