Progress Bar 方案

迈不过友情╰ 2021-10-19 14:43 203阅读 0赞

**1、需求背景：**  
    很多model反馈需要一个Progressbar 展示在对应的直播视频中，目前各个直播网站只是做了一个简单的progress bar功能，我们可以提供一个在视频直播中展示progress bar的功能。  
**2、具体方案：  
    ![854724-20190813140730443-1138570343.jpg][]**

用户点击Add Gaol之后弹出弹窗，用户需要输入达到goal的token值，以及关于goal的描述，用户可以点击需要的内容进行设置，如下图所示

![854724-20190819093228845-1257866005.jpg][]

**总体说明：**

1、激活progress bar之后，直接按goal值从小到大的顺序在直播时使用，只有当一个目标完成后才进入并显示下一个目标值

2、点击“add goal”，弹出设定目标的填写页，点击“summit”，在目标列表中新增一列  
![Cls2HbJODz2Dt7IqDIgqAg.png][]![Click and drag to move][]

3、新增的goal，默认没有选择任何玩具

4、Toy，Reaction Time,Vibaration,Rotation的关系

Toy为Choose选择，后面三项都为禁用状态

• Toy为Max、Nora，后面三项都为启用状态

• Toy为其他玩具，则Rotation为禁用状态

5、waiting list中的目标为禁用状态  
![854724-20190819093324272-681437064.jpg][]

![Click and drag to move][]

点击“waiting list”中目标的上移icon，则该目标进入playing list中

点击“playing list”中目标的下移icon，则该目标进入waiting list中

6、style中的样式展示  
![854724-20190819093430510-873245356.jpg][]

**默认样式为：**  
![KgTtrcEO-bdxpBg5-PkXeg.png][]![Click and drag to move][]  
聊天室消息提醒：  
![854724-20190819095114083-989265553.png][]

请使用手机"扫一扫"x

转载于:https://www.cnblogs.com/bohemiaCP/p/11346321.html

[854724-20190813140730443-1138570343.jpg]: /images/20211019/f6bd51428f184f64be1e7a5d3b8e8e61.png
[854724-20190819093228845-1257866005.jpg]: /images/20211019/b2af7b31b9c646cdaa4190aa28d3fb63.png
[Cls2HbJODz2Dt7IqDIgqAg.png]: https://rm.hytto.com:3000/uploads/2019/07/30/Cls2HbJODz2Dt7IqDIgqAg.png
[Click and drag to move]: 
[854724-20190819093324272-681437064.jpg]: /images/20211019/12a51dc023fe4e32bb5ff3c4ff791c40.png
[854724-20190819093430510-873245356.jpg]: https://img2018.cnblogs.com/blog/854724/201908/854724-20190819093430510-873245356.jpg
[KgTtrcEO-bdxpBg5-PkXeg.png]: https://rm.hytto.com:3000/uploads/2019/07/30/KgTtrcEO-bdxpBg5-PkXeg.png
[854724-20190819095114083-989265553.png]: https://img2018.cnblogs.com/blog/854724/201908/854724-20190819095114083-989265553.png