feat(noticeBar): 通知栏支持自定义滚动速度 #78

kiner-tang · 2022-11-09T13:39:45Z

这个 PR 做了什么? (简要描述所做更改)

feat(noticeBar): 通知栏自定义滚动速度
docs: 修改通知栏部分文档错误

这个 PR 是什么类型? (至少选择一个)

错误修复(Bugfix) fix #{issue id}
新功能(Feature) resolve #{issue id}
代码重构(Refactor)
文档修改(Docs)
代码风格更新(Code style update)
类型描述更新(TypeScript definition update)
其他，请描述(Other, please describe):

这个 PR 涉及以下平台:

changeset-bot · 2022-11-09T13:39:48Z

🦋 Changeset detected

Latest commit: 3a81807

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
ossaui	Patch
ossa-demo	Patch
ossa-doc	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2022-11-09T13:39:49Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
ossa-demo	✅ Ready (Inspect)	Visit Preview	Nov 24, 2022 at 2:17AM (UTC)

1 Ignored Deployment

Name	Status	Preview	Updated
ossa-doc	⬜️ Ignored (Inspect)		Nov 24, 2022 at 2:17AM (UTC)

CaedmonW · 2022-11-09T15:36:31Z

packages/ossa/src/components/noticeBar/index.tsx

+    'animationDuration': `${mergedDuration}s`,
+    'WebkitAnimationDuration': `${mergedDuration}s`,


感觉这种实现方式会有问题，滚动速度跟文案长度相关了，文字越长，滚动越快
一般用户想要的效果应该是文字滚动速度恒定?

我看之前虽然文档中有说明speed属性，但实际上并没有实现相关的逻辑，那么，我们预期的speed属性的效果是怎样的呢？speed属性所给的值代表的是整段文本在多长时间内的滚动速度呢？

speed属性应该是参考了taro-ui的属性设计，但是当时却没有实现
想要实现的效果应该是用于控制文字滚动速度，设定该值后，文字滚动速度不应该和文案长度相关。实际使用中，文案内容往往是动态的，如果业务中文案长度变化范围较大，对用户侧来说，通知栏的体验会不一致。

恩恩，确实是这样，我找时间参考一下其他组件库的设计，实现一下speed的逻辑吧

感觉咱们可以直接引入这个库处理文字滚动的逻辑，我看很多reactUI库都使用这个

https://www.npmjs.com/package/react-fast-marquee

可以试试看，需要看下其他端小程序的表现是否符合预期

CaedmonW

目前scrollable属性好像失效了

另外，目前Marquee内部实现使用的是div标签，在打包之后，div标签依旧存在，而taro支持html标签是从3.3版本开始的，感觉需要验证下老版本taro的支持度

kiner-tang · 2022-11-17T02:45:27Z

目前scrollable属性好像失效了

另外，目前Marquee内部实现使用的是div标签，在打包之后，div标签依旧存在，而taro支持html标签是从3.3版本开始的，感觉需要验证下老版本taro的支持度

好的，我抽空优化并验证一下，最近比较忙

vercel · 2022-11-20T13:41:10Z

Deployment failed with the following error:

Invalid request: `target` should be string.

kiner-tang · 2022-11-20T13:46:20Z

目前scrollable属性好像失效了
另外，目前Marquee内部实现使用的是div标签，在打包之后，div标签依旧存在，而taro支持html标签是从3.3版本开始的，感觉需要验证下老版本taro的支持度

好的，我抽空优化并验证一下，最近比较忙

既然这些框架没有现成的同时支持小程序和h5的逻辑，那么我们就自己实现自定义滚动的逻辑吧。传入的速度speed与内容宽度计算可以得出我们滚动一屏所需要的时间，通过这个时间设置动画播放的时间。

CaedmonW · 2022-11-22T01:50:30Z

既然这些框架没有现成的同时支持小程序和h5的逻辑，那么我们就自己实现自定义滚动的逻辑吧。传入的速度speed与内容宽度计算可以得出我们滚动一屏所需要的时间，通过这个时间设置动画播放的时间。

动态获取内容的宽度做计算，我觉得可行

packages/ossa/src/components/noticeBar/index.tsx

CaedmonW · 2022-11-24T02:35:53Z

lgtm 👍

CaedmonW · 2022-11-24T03:07:07Z

CI 中的测试，页面中的中文会乱码，导致获取到的宽度有问题，测试用例执行失败了

kiner-tang · 2022-11-24T03:29:40Z

CI 中的测试，页面中的中文会乱码，导致获取到的宽度有问题，测试用例执行失败了

咦，怎么中文会变成乱码呢？是不是的解决乱码的问题呀

CaedmonW · 2022-11-24T03:51:21Z

咦，怎么中文会变成乱码呢？是不是的解决乱码的问题呀

理论上解决乱码问题才是正确的解决方案，我上次试了下，好像没有找到解决方案😅
而且乱码还不是必现的

kiner-tang · 2022-11-24T03:57:16Z

咦，怎么中文会变成乱码呢？是不是的解决乱码的问题呀

理论上解决乱码问题才是正确的解决方案，我上次试了下，好像没有找到解决方案😅 而且乱码还不是必现的

那这边临时将自定义滚动的实例的文字改成英文，这样就不会因为乱码导致宽度与实际不一致而用例不通过了

kiner-tang · 2022-11-24T04:10:10Z

咦，怎么中文会变成乱码呢？是不是的解决乱码的问题呀

理论上解决乱码问题才是正确的解决方案，我上次试了下，好像没有找到解决方案😅 而且乱码还不是必现的

感觉应该是基础镜像ubuntu-latest不支持中文字符集或者没有设置中文字符集，我有时间也看一下这个问题

CaedmonW · 2022-11-24T05:34:20Z

感觉应该是基础镜像ubuntu-latest不支持中文字符集或者没有设置中文字符集，我有时间也看一下这个问题

👍

* chore: 增加开发实时编译命令 (#56) * fix: taost组件customStyle报错未生效 (#55) * release: 0.3.5 * chore: auto publish to npm * Update release.yml * docs: update docs * docs: update docs * feat: 走马灯点击回调支持传入当前点击子项索引 * fix(Carousel): indicatorColor 与默认保持一致 * Create short-elephants-promise.md * Update verifyCommit.js * Update release.yml * Update release.yml * chore: auto release * feat: 增加倒计时组件Countdown * chore: changeset * feat: 增加format属性&定时器清除 * fix(Badge): 修复 Badge 的 info 为 0 或为空时显示异常问题 (#58) * feat: 角标默认值逻辑与相关文档修改 * feat: 角标默认值逻辑与相关文档修改 * feat: 更新测试用例 * feat: 更新注释 * feat: update changeset * fix: add Badge default type value Co-authored-by: tangwenhui <tangwenhui@rd.netease.com> Co-authored-by: CaedmonW <caedmonwa@gmail.com> * feat: Radio 受控可由 RadioGroup 控制 (#49) * feat: Radio 受控可由 RadioGroup 控制 * docs: add desc Co-authored-by: CaedmonW <caedmonwa@gmail.com> * Version Packages (#64) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * Update release.yml * docs: 删除冗余输入框类型 (#67) * docs: 删除冗余输入框类型 * chore: update changeset Co-authored-by: tangwenhui <tangwenhui@rd.netease.com> * fix: 删除图片预览冗余代码 (#68) * fix: 删除图片预览冗余代码 * chore: update changeset Co-authored-by: tangwenhui <tangwenhui@rd.netease.com> * docs: 修改文档中 input 组件错误属性类型描述 * chore: update changeset * docs: 补充 showSplitLine 属性文档说明 * feat: input 组件是否显示字符计数器属性名使用 showCount 属性替代 * feat: update demo * docs: 删除 demo 中冗余代码 * chore: update changeset * docs: 补充列表组件缺少的 leftIconSize 属性文档描述 * docs: navBar 组件中 rightSlot 属性描述有误 * refactor: refactor call expression * chore: update changeset * refactor: refactor call expression * chore: 版本号 * feat: 单选按钮 api 命名规范化 & 增加安全使用过期属性方法 * feat: 单选按钮 api 命名规范化 & 增加安全使用过期属性方法 * chore: update changeset * feat: update docs * feat: 类型优化 * feat: 代码优化 * feat: 代码优化 * feat: 代码优化 * Update dirty-suns-punch.md * feat: 类型优化 * feat: 文档优化 * feat: 文档优化 * feat: 代码优化 * Update packages/ossa/src/utils/index.ts Co-authored-by: CaedmonW <107974245+CaedmonW@users.noreply.github.com> * chore: add code of conduct * chore: add Security Policy * fix: 图片预览&轮播支付宝兼容 (#57) * fix: 图片预览&轮播支付宝兼容 * chore: changeset * Version Packages (#69) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * feat(noticeBar): 通知栏支持自定义滚动速度 (#78) * feat: 通知栏自定义滚动时长支持 * chore: update changeset * feat: 增加测试用例 * feat: 增加测试用例 * feat: 实现自定义文字滚动速度 * feat: 更新测试用例 * feat: 更新测试用例 * feat: 更新测试用例 * feat: 重构文字滚动逻辑 * feat: 生成随机id用于获取目标元素 * feat: update test case * feat: update test case * feat: update test case * fix(noticeBar): 临时将 noticeBar 自定义滚动示例中的内容改为英文,解决 ci 运行测试任务中文乱码导致不通过问题 (#86) * fix: 临时将 noticeBar 自定义滚动示例中的内容改为英文,解决 ci 运行测试任务中文乱码导致不通过问题 * chore: update changeset * 文件命名格式更改 (#84) * chore: 文件命名格式更改 * chore: add changeset * fix: file name changed * chore: pnpm lock file conflict * fix(noticeBar): bias in CI (#88) * Version Packages (#85) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * feat: 新增营销组件@ossa/loki (#87) * feat: 新增营销组件ossaui-loki * fix: 修改loki pkg名称 * fix: prebundler limi add @ossa/loki * fix: 修改style引入名称 * feat: 新增loki 使用文档 * fix: 修改pkg信息 * fix: 修复process.env全局注入引用异常 * fix: 优化px2rem * fix: 优化loki H5兼容计算 * fix: 优化loki H5兼容计算 * fix: 优化loki H5兼容计算 * fix: 优化loki H5兼容计算 * fix: 修改九宫格样式 * fix: 修改ossa-demo关联loki的版本 * feat: merge main * feat: merge main * fix: update changeset Co-authored-by: xuyang03 <xuyang03@corp.netease.com> * Update ci.yml * Version Packages * Update package.json * feat: 完善 tab-bar 组件文档与类型描述 (#94) * feat: 完善 switch 组件相关文档 & 类型描述优化 (#93) * feat: 补充步进器相关文档与类型描述 (#90) * feat: 完善评分组件文档 & 优化属性命名 (#89) * chore: 倒计时放入数据展示目录下 * chore: 增加countdown.scss文件 * feat: 增加滑动单元格组件swipe-cell * chore: changeset * chore: 修改代码格式&类型注释 * feat: 右侧滑动区域默认展示 * test: swipe-cell增加测试用例 * test: fix test * Feature build command (#101) * fix: vercel build artifact error * chore: build command * fix: swipe-cell测试用例修复 (#102) * feat: modal组件confirm 按钮支持openType (#76) * fix: vercel build artifact error * chore: build command * feat: modal组件confirm 按钮支持openType * refactor(Modal): call expression * docs(modal): 属性详细说明 * fix: fix input disabledClear (#100) * fix: fix input disabledClear * Create forty-carrots-beg.md Co-authored-by: CaedmonW <107974245+CaedmonW@users.noreply.github.com> * fix: 修改部分 stepper 组件错误与完善类型描述 (#99) * Version Packages (#96) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * chore: change check modify command (#103) * Feature upload callback (#105) * feat(uplaod): add onImageClick * fix: import path * docs: onFail type definition * fix: cnpm package install failed * refactor: update typescript version * chore: lock @swc/core to 1.3.6 * Version Packages (#106) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: ZengJie <48742371+Zeng-J@users.noreply.github.com> Co-authored-by: CaedmonW <caedmonwa@gmail.com> Co-authored-by: CaedmonW <107974245+CaedmonW@users.noreply.github.com> Co-authored-by: tangwenhui <tangwenhui@rd.netease.com> Co-authored-by: jianzhouf <18003152+jianzhouf@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Xu <1750978657@qq.com> Co-authored-by: xuyang03 <xuyang03@corp.netease.com>

kiner-tang added 2 commits November 9, 2022 21:34

feat: 通知栏自定义滚动时长支持

a508167

chore: update changeset

f8494da

kiner-tang requested a review from CaedmonW November 9, 2022 13:39

kiner-tang self-assigned this Nov 9, 2022

auto-assign bot requested a review from onlychild November 9, 2022 13:39

vercel bot deployed to Preview – ossa-demo November 9, 2022 13:40 View deployment

feat: 增加测试用例

bbc6d99

vercel bot deployed to Preview – ossa-demo November 10, 2022 01:26 View deployment

feat: 增加测试用例

72c7a87

vercel bot deployed to Preview – ossa-demo November 10, 2022 02:18 View deployment

CaedmonW requested changes Nov 14, 2022

View reviewed changes

kiner-tang added 5 commits November 15, 2022 17:41

chore: merge main

6daabee

feat: 实现自定义文字滚动速度

66e82c8

feat: 更新测试用例

f853219

feat: 更新测试用例

eba9b70

feat: 更新测试用例

a32b4f7

vercel bot deployed to Preview – ossa-demo November 15, 2022 12:29 View deployment

CaedmonW requested changes Nov 17, 2022

View reviewed changes

kiner-tang changed the title ~~feat(noticeBar): 通知栏自定义滚动时长支持~~ feat(noticeBar): 通知栏支持自定义滚动速度 Nov 19, 2022

kiner-tang added 2 commits November 20, 2022 21:37

feat: 重构文字滚动逻辑

5cf4fc1

Merge branch 'main' into fix/noticeBar

63996a4

vercel bot deployed to Preview – ossa-doc November 20, 2022 13:43 View deployment

vercel bot deployed to Preview – ossa-demo November 20, 2022 13:44 View deployment

CaedmonW requested changes Nov 22, 2022

View reviewed changes

packages/ossa/src/components/noticeBar/index.tsx Outdated Show resolved Hide resolved

packages/ossa/src/components/noticeBar/index.tsx Outdated Show resolved Hide resolved

kiner-tang added 4 commits November 24, 2022 09:45

feat: 生成随机id用于获取目标元素

b976c1b

feat: update test case

85564ef

feat: update test case

f5f89e8

feat: update test case

3a81807

vercel bot deployed to Preview – ossa-demo November 24, 2022 02:17 View deployment

CaedmonW approved these changes Nov 24, 2022

View reviewed changes

CaedmonW merged commit 1039034 into NeteaseYanxuan:main Nov 24, 2022

github-actions bot mentioned this pull request Nov 24, 2022

Version Packages #85

Merged

github-actions bot mentioned this pull request Nov 24, 2022

Version Packages kiner-tang/OSSA#1

Open

		'animationDuration': `${mergedDuration}s`,
		'WebkitAnimationDuration': `${mergedDuration}s`,

feat(noticeBar): 通知栏支持自定义滚动速度 #78

feat(noticeBar): 通知栏支持自定义滚动速度 #78

Uh oh!

Conversation

kiner-tang commented Nov 9, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented Nov 9, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

vercel bot commented Nov 9, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

CaedmonW Nov 9, 2022

Choose a reason for hiding this comment

Uh oh!

kiner-tang Nov 14, 2022

Choose a reason for hiding this comment

Uh oh!

CaedmonW Nov 14, 2022

Choose a reason for hiding this comment

Uh oh!

kiner-tang Nov 14, 2022

Choose a reason for hiding this comment

Uh oh!

kiner-tang Nov 14, 2022

Choose a reason for hiding this comment

Uh oh!

CaedmonW Nov 15, 2022

Choose a reason for hiding this comment

Uh oh!

CaedmonW left a comment

Choose a reason for hiding this comment

Uh oh!

kiner-tang commented Nov 17, 2022

Uh oh!

vercel bot commented Nov 20, 2022

Uh oh!

kiner-tang commented Nov 20, 2022

Uh oh!

CaedmonW commented Nov 22, 2022

Uh oh!

Uh oh!

Uh oh!

CaedmonW commented Nov 24, 2022

Uh oh!

CaedmonW commented Nov 24, 2022

Uh oh!

kiner-tang commented Nov 24, 2022

Uh oh!

CaedmonW commented Nov 24, 2022

Uh oh!

kiner-tang commented Nov 24, 2022

Uh oh!

kiner-tang commented Nov 24, 2022

Uh oh!

CaedmonW commented Nov 24, 2022

Uh oh!

Uh oh!

kiner-tang commented Nov 9, 2022 •

edited

Loading

changeset-bot bot commented Nov 9, 2022 •

edited

Loading

vercel bot commented Nov 9, 2022 •

edited

Loading