亲爱的小伙伴,在您浏览之前,烦请关注一下,在此深表感谢!
课程主题:复选框全选反选取消制作
主要内容:点击复选框,实现列表数据项全选选中、反选和取消选中效果
应用场景:多项选定、一键全选、一键取消、一键反选
案例展示:
案例视频
复选框演示视频
正文内容:实现复选框点击全选/取消全选;实现下拉弹窗一键全选、一键反选、全部取消。
1、复选框点击全选/取消全选
步骤一:拖入复选框并命名为中继器外复选框,提示信息"选择",下箭头icon;在中继器中添加复选框,并命名中继器内复选框;命名的目的是下一步做交互时好辨识。
步骤二:添加中继器外复选框的交互,选中时------两个复选框值为真,取消选中时------两个复选框值为假;
2、实现下拉弹窗一键全选、一键反选、全部取消
步骤一:制作弹窗,包含弹窗背景、一键全选、一键反选、全部取消元件;组合命名为"选择弹窗",载入时隐藏这个弹窗;
步骤二:添加下箭头交互,单击时------切换选择弹窗可见性;
步骤三:添加一键全选交互,全选时内外复选框的值均为真;
步骤四:添加一键反选交互,反选时外部复选框值为假,内部复选框可能有选中的项,所以要选择切换;
步骤五:添加全部取消交互,值全部为假;
本课小结:掌握复选框相关知识点,真、假、切换三种值的内涵;选中时与取消选中时如何选择值,以及用户体验交互设计,如何让用户用的舒服和方便。
相关课程直通车:
如有其他相关问题,欢迎私信沟通,关注 结构化知识课堂-CSDN博客
明天的产品大咖就是你,创作不易,麻烦关注一下,点赞+收藏,感谢大家!