养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

微信小程序表单类组件radio使用详解

时间:2024-09-29 17:26:23

本篇经验将继续分享表单类组件中radio单选框组件的使用详解。本篇经验将基于第一个手工构建的微信小程序演示,具体构建步骤,可以参考如下经验引用。

微信小程序表单类组件radio使用详解

工具/原料

微信开发者工具

方法/步骤

1、先百度搜索查看radio单选框组件的官方文档,拉悟有仍该组件的属性较少,含义也很清晰,注意,该组件要结合rad足毂忍珩io-group包装组件一起来使用,通过radio-group的bindchange回调事件获取被选中的单选框信息。

微信小程序表单类组件radio使用详解

2、在wxml中通过<radio-group>和<radi艺皱麾酪o>标签创建一个单向按钮组,并且在r锾攒揉敫adio-group组件上,绑定其bindchange事件回调函数。注意,这里使用了wxml的列表渲染和数据绑定特性。关于这两个特性的具体使用,请参考如下经验引用。

微信小程序表单类组件radio使用详解

3、在js文件中定义上述数据绑定所使用变量的初始值,已经radio-group上绑定的事件回调函数。

微信小程序表单类组件radio使用详解

4、在wxss中声明wxml中使用的标签类的样式定义。

微信小程序表单类组件radio使用详解

5、保存编译后,在模拟器中查看页面效果,符合预期,勾选单选按钮后,在调试器中可以看到事件回调函数打印的信息。

微信小程序表单类组件radio使用详解

© 一点知识