提问 发文

大屏使用技巧——如何使用标牌组件实现加减计数的效果

赵炎飞

| 2023-06-04 15:37 178 0 0

实现效果:


    从上面的动图中可以看到,当我们点击左右两侧的 “-1” 和 “+1” 按钮时,中间的数字0会随之加减。这里主要是对回调的运用,三个标题组件会通过数据过滤器来接受数据容器发出的回调 count ,当我们点击左右两侧的标题时,它们会基于count进行 -1或+1的运算得到新的值,然后通过回调newCount来发送给数据容器,数据容器的特性是当数据发生变化时,它会立刻触发自己的回调,也就是说,接收到newCount后,数据容器会把newCount通过回调count重新发送给标题,以此来构建一个完整的交互循环。

 实现思路:

1.先创建三个标题,将它们的text字段分别设置为 -1,0,+1,然后我们再创建一个数据容器组件,这个数据容器的主要作用是获取到最新的数值(newCount),然后分发给三个标题,标题组件通过接受数据容器的回调(count)来得到最新值。

2.我们给左右两侧的标题分别添加一个数据过滤器,用来返回新的数值。

左侧的数据过滤器:


右侧的数据过滤器:


中间的标题数据过滤器:


可以看到,两侧的数据过滤器都返回了一个新的字段count,新count的值是基于回调count来计算的。

3.然后给两侧的标题添加一个回调,将count赋值给newCount发送出去。


4.对数据容器而言,它需要做的就是接受newCount后,再把newCount赋值给count返回给三个标题即可,所以我们也需要给它添加一个数据过滤器和回调。




这样,我们的标题计数器就完成了。

收藏 0
分享
分享方式
微信

评论

游客

全部 0条评论

19

文章

1.65K

人气

6

粉丝

1

关注

官方媒体

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

开始免费试用 预约演示

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

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

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

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