Cloud梦
Cloud梦
  • 发布:2022-06-23 11:56
  • 更新:2023-06-27 12:36
  • 阅读:1243

uni-notice-bar通告栏滚动时更新text值会出现滚动不完全就重新滚动的问题

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 10

HBuilderX类型: 正式

HBuilderX版本号: 3.4.15

手机系统: Android

手机系统版本号: Android 11

手机厂商: 小米

手机机型: Mi 11

页面类型: nvue

vue版本: vue2

打包方式: 离线

项目创建方式: HBuilderX

操作步骤:

1.插件市场下载uni-notice-bar 通告栏组件。
2.创建一个nvue文件,代码复制notice-bar.vue文件代码,默认给text属性设置空字符串,创建一个按钮可以点击触发更新滚动通告的text值。

预期结果:

更新uni-notice-bar的text属性的值时,当前已经滚动的文字先滚动完后,再由新的text值从通告栏最右边慢慢向左滚动出现,再到通告栏最左边慢慢滚动消失。

实际结果:

使用uni-notice-bar设置文字滚动时,给text属性重新赋值时,文字直接出现在中间的位置,不是从最右边慢慢滚动出来的,还有滚动不全(最后一个滚动文字没有从左边慢慢消失)就重新滚动。

bug描述:

使用uni-notice-bar设置文字滚动时,给text属性重新赋值时,文字出现的位置不是从最右边慢慢滚动出来的问题,还有滚动不全(最后一个滚动文字没有从左边慢慢消失)就重新滚动的问题。

2022-06-23 11:56 负责人:无 分享
已邀请:
MRCHEN陈先生

MRCHEN陈先生

滚动不全有解决方案吗

  • MRCHEN陈先生

    已解决,滚动显示不到最后数据就重新滚动临时解决方法,先初始定义text长度足够长,然后重新赋值你想要的数据,滚动就会显示正常

    2022-08-02 14:41

  • 3***@qq.com

    回复 MRCHEN陈先生: 你好,也遇到这个问题。没理解你说的定义text长度,是写入足够长的内容?然后动态更改数据就可以续上嘛?这个足够长是多少呢?

    2023-06-27 11:33

3***@qq.com

3***@qq.com - 菜鸟一枚

楼主你好,个人解决方案,仅供参考;
uni-notice-bar组件提供v-if,那我们就将text绑定数据放进数组去循环,添加if判断。
true/false切换时间,根据text得长度去获取text所占用页面宽度,然后÷speed得默认值100,获取到滚动完成时间,根据完成时间(最好再计算时间得基础上+1s),设置定时任务,去切换v-if得条件。需要注意第一次加载时,数组索引为0时添加判断,

  • 3***@qq.com

    新手,有优化或者错误还请提出,感谢

    2023-06-27 12:38

  • 3***@qq.com

    添加判断,if(a==textLength){return}

    2023-06-27 12:40

  • 3***@qq.com

    再插一句,文本宽度获取来源,https://juejin.cn/post/7091990279565082655。

    2023-06-27 12:42

要回复问题请先登录注册