微信小程序之自定义按钮单选

最近在做小程序时候遇到了自定义按钮单选操作的问题,因为小程序兴起时间不是很长,遇到问题网上的答案知之甚少,所以将我解决问题的方法贴出来,希望各位开发者互相交流,如果有更好的解决方法大家一起学习...

01.png

如上图所示,有6个按钮,要求是按钮单选操作.

经过各种碰壁操作之后,得到了最终的解决方案,开始撸代码

首先按钮是图片创建的,然后按钮有两种状态,普通状态和高亮状态

图片数据数组.png

在.js里面创建数组,按钮是6个button,所以数组里面创建6个字典,字典里面三个字段"name","icon","icon_Hl",name字段没有用到,icon是普通状态下的图片路径,icon_Hl是高亮状态下的路径

接下来第二部,用数组循环创建button

数组循环创建button.png

***注意图中的红色箭头,data-index不是微信小程序的属性名称,而是微信小程序给元素开辟的一块空间里面可以放任何你定义的属性(比如data-index 或者data-zhangsan),记住开头要以"data-"开头,图中我将数组的下标赋值给了data-index***

好了到这一步图片按钮创建完成,接下来按钮单选

按钮点击事件.png

在点击事件里面获取到上面赋值到data-index里面的值,也就是var index.

然后刷新数据,将index赋值给selectedIndex,此时的selectedIndex就是点击的按钮的下标.

***setData方法会刷新当前页面***

最后实现单选效果

单选效果.png

用 if, else if 语句,判断循环创建是数组的下标是否等于selectedIndex,如果等于,那么这个按钮就会高亮状态,否则就是正常状态.

大家有什么更好的方法可以发出来,一起学习,共同进步...