实现一个简单SwitchTab
逻辑-
首先它是可以多个选项,然后考虑的事字的长读不能影响整体的框架,最后它的限制可以是多少个选线(你们可以移除这个限制问题,我用的限制最多是4个)
代码-
首先是在项目里创建component(自定义组件),我在component文件夹里创建了叫ESwitchTab的自定义组件;
![](https://img.haomeiwen.com/i2591504/ee0754c18d88548e.png)
![](https://img.haomeiwen.com/i2591504/876466d19b5a4172.png)
在这里是properties是外来值,我的外来数据是以data命名这里提示的是data是我自己命名的不是系统默认代码,然后看见它的type是他的属性 要是 字符串那就string 要是 数字Int这种 ,value是他的默认值在,外来值空的情况下会引用value。
![](https://img.haomeiwen.com/i2591504/f69ba65767e15862.png)
这个是组件里的各个事件我在wxml里填了一个onTab的事件然后在这个method方法里添加了onTab,在这里我们获取了组件的indx值然后用 triggerEvent( “事件名称”,传值) 来监听事件以及传值。
![](https://img.haomeiwen.com/i2591504/a43ed9ec0c1405e6.png)
这里提醒下的是事记得查看下组件的json文件里的参数是否一致。
![](https://img.haomeiwen.com/i2591504/841d8ec582d9bf24.png)
引用-
首先是引入到文件 需要在json里注册组件 “组件名称”:“路径”
![](https://img.haomeiwen.com/i2591504/c9cb2e52b47923d3.png)
然后在wxml里引用。
![](https://img.haomeiwen.com/i2591504/9ba81a9a38b02817.png)
在这里是监听了,e.detail 是我们刚刚传的值。
![](https://img.haomeiwen.com/i2591504/80f08ae0ba54d481.png)
结果-
(这个中间的显示1 是我自己写组件返回的值的没有在组件里)
![](https://img.haomeiwen.com/i2591504/da1b559009590ab6.png)
ESwitchTab-Github
第二次写文章 不怎么会表达 希望能有一定的帮助。
网友评论