NoticeBar通知栏

[StrangeSugar]

重现链接

https://github.com/youzan/vant-weapp/blob/dev/dist/notice-bar/index.js

Vant 版本

微信小程序版

描述一下你遇到的问题。

1、delay属性 文档中写的单位是s,应该是ms 。源码里边儿也没转换，wx.createAnimation() delay属性是ms。
2、切换组件时会，出现闪烁，切无法从最前面开始播放。原因是animationData: this.resetAnimation .translateX(this.wrapWidth) .step() .export()中的translateX(this.wrapWidth),问题。将translateX(0)后不会出现切换时闪烁

重现步骤

1、delay属性 文档中写的单位是s,应该是ms 。源码里边儿也没转换，wx.createAnimation() delay属性是ms。
2、切换组件时会，出现闪烁，切无法从最前面开始播放。原因是animationData: this.resetAnimation .translateX(this.wrapWidth) .step() .export()中的translateX(this.wrapWidth),问题。将translateX(0)后不会出现切换时闪烁

设备/浏览器

微信开发者工具

[shenjingnan]

@StrangeSugar
第一个问题： 文档的确有误，已修正
第二个问题： 关于 切换闪烁 问题，能否提供最小复现代码？

[StrangeSugar]

第二个问题：我使用得是uniapp 加微信小程序版vant&nbsp;代码如下： <template&gt; <view class=""&gt; <van-notice-bar class="tip" background='#F4F4F4'&nbsp; color='#ff520e'&nbsp; text="SADASDASDASDASggggSDFASDASDASDASD"&nbsp; :speed='40'&nbsp; v-if="isShow" /&gt; <view class="" v-else&gt; 123 </view&gt; <button type="default" @click="isShow=!isShow"&gt;按钮</button&gt; </view&gt; </template&gt; <script&gt; export default{ data(){ return{ isShow:false } } } </script&gt; <style&gt; </style&gt; 最终发现问题在于 van-notice-bar 源码文件中的scroll 方法 ，闪速原因由于js 动态计算内容长度后在显示到页面，中间有时间差。如果机器性能好，或者页面性能好的话 是不会闪烁的。因为是js 计算内容宽度，所以v-show 也不能用。只能使用v-if。 scroll() { &nbsp; &nbsp; &nbsp; this.timer &amp;&amp; clearTimeout(this.timer); &nbsp; &nbsp; &nbsp; this.timer = null; &nbsp; &nbsp; &nbsp; this.setData({ &nbsp; &nbsp; &nbsp; &nbsp; animationData: this.resetAnimation &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .translateX(this.wrapWidth) &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .step() &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .export(), &nbsp; &nbsp; &nbsp; }); &nbsp; &nbsp; &nbsp; requestAnimationFrame(() =&gt; { &nbsp; &nbsp; &nbsp; &nbsp; this.setData({ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; animationData: this.animation &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .translateX(-this.contentWidth) &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .step() &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .export(), &nbsp; &nbsp; &nbsp; &nbsp; }); &nbsp; &nbsp; &nbsp; }); &nbsp; &nbsp; &nbsp; this.timer = setTimeout(() =&gt; { &nbsp; &nbsp; &nbsp; &nbsp; this.scroll(); &nbsp; &nbsp; &nbsp; }, this.duration); &nbsp; &nbsp; }, 标注红色 位置 将this.wrapWidth 改成 ‘0’&nbsp;，或者删掉绿色部分，即可以实现内容最开始内容靠左后再滚动，且不会出现闪烁。如果这部分代码有特殊用处的话，请回复一下我。我再深入研究一下。 同时我还发现第三个问题： 同上环境下，我使用van-popup。 通过自己编写自定义组件的方式引入了该组件 import vanPopup from '@/wxcomponents/vant/dist/popup'，如果基础页通过pages.json里进行配置引入组件的话，则正常使用。 然后close 事件用vue 的写法，如果不传参的话就会报错 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<van-popup class='guide' :show="isShowVanPopup"&nbsp; round&nbsp;&nbsp; safe-area-inset-bottom&nbsp; position="bottom"&nbsp; z-index='10000' closeable @close="handlePopupClose('1')" &gt; 红色部分是已经改了的，传入任意值就不会报错。 如果不传参&nbsp; ***@***.***="handlePopupClose" 会报错。TypeError: Cannot read property '__args__' of undefined 我也只是大概分析了下源码，尝试了一下，解决了问题。具体原因没有深入分析

…

------------------&nbsp;原始邮件&nbsp;------------------ 发件人: ***@***.***&gt;; 发送时间: 2021年11月30日(星期二) 凌晨0:20 收件人: ***@***.***&gt;; 抄送: ***@***.***&gt;; ***@***.***&gt;; 主题: Re: [youzan/vant-weapp] NoticeBar通知栏 (Issue #4632) @StrangeSugar 第一个问题： 文档的确有误，已修正 第二个问题： 关于 切换闪烁 问题，能否提供最小复现代码？ — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android.

[chenjiahan]

已发布 1.10.3 修复。