2019-04-24 关于点赞与取消赞按钮的设计

如何设计的优雅 点赞/取消赞,开关切换 的请求的发送


开关切换

页面上:用户每次点击都会切换switch开关的状态;

接口上:每次响应成功之后才能去切换switch的状态;

使用场景:用户会习惯性狂点switch直到switch切换,但是由于用户点击速度过快,

上次点击的响应还没回来,用户就又发送了一个或者多个请求,导致接口报错!

从前端角度,如何规避这些问题,并让用户体验最佳 (*❦ω❦)???

1.错误写法


图1:错误代码

如上图1:菜鸟级写法:就当做普通发送请求就完事了,啥也不管!~

结果使用的时候各种报错,点的越快,报错越多,约点越闹心,QAQ··

2.正确姿势(控制用户的点击操作)

图2:页面代码


图3:代码

如图3:我们通过给switch添加disabled属性来控制用户的连续点击,防止用户重复提交;

思路:用户每次点击完,disabled属性设置为true,不再让用户操作,直到响应回来之后,

将disabled恢复为false,可让用户操作,从而发送请求!

Tips:这个disabled属性直接绑定在每个switch所在数据对象上

3. 正确姿势

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容