实现效果:
从上面的动图中可以看到,当我们点击左右两侧的 “-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返回给三个标题即可,所以我们也需要给它添加一个数据过滤器和回调。
这样,我们的标题计数器就完成了。
文章
3.1K人气
8粉丝
1关注
©Copyrights 2016-2022 杭州易知微科技有限公司 浙ICP备2021017017号-3 浙公网安备33011002011932号
互联网信息服务业务 合字B2-20220090