提问 发文

选项卡如何实现取消选中的效果?

赵炎飞

| 2023-05-22 11:06 447 0 1

前言:

    平时在用选项卡这个组件的时候,经常会遇到需要取消选中的需求,但是选项卡本身又不支持重复点击取消选中项。不过好在选项卡有一个自定义的动作——设置选中项,当我们设置选中项为0时,就可以达到取消选中的效果。那么,要如何实现重复点击同一个选项时,取消选中呢?

实现思路:

    1.首先假设大屏上有这样一个选项卡:


    2.然后我们在大屏上添加一个图片,这张图片的宽高和单个选项一模一样,不过图片的透明度需要设置为0


    3.调整两个组件的图层位置,保证图片组件位于选项卡组件之上。


    4.接下来,我们需要给选项卡添加一个自定义事件,当选中项改变时,我们把图片组件移动到该选项之上,这里我只添加了一个s=1时的事件,实际上有几个选项就需要添加几个这样的自定义事件。


    5.然后我们再给图片组件添加一个点击的自定义事件,当点击图片时,设置选项卡的选中项为0,同时将图片自己移动到画布外。


    6.如此这般,即可完成点击已选中的选项后,取消选中的效果。

收藏 0
分享
分享方式
微信

评论

游客

全部 0条评论

19

文章

3.2K

人气

8

粉丝

1

关注

官方媒体

轻松设计高效搭建,减少3倍设计改稿与开发运维工作量

开始免费试用 预约演示

扫一扫关注公众号 扫一扫联系客服

©Copyrights 2016-2022 杭州易知微科技有限公司 浙ICP备2021017017号-3 浙公网安备33011002011932号

互联网信息服务业务 合字B2-20220090

400-8505-905 复制
免费试用
微信社区
易知微-数据可视化
微信扫一扫入群