微信小程序三级联动教程

时间:2024-10-12 01:41:29

1、在已打开微信小程序开发工具,创建一个项目并打开

微信小程序三级联动教程

2、新建index.wxml文件,利用view标签和三组picker标签,分别绑定事件和属性

微信小程序三级联动教程

3、在index.wxss文件中,利用类选择器设置标签字体属性

微信小程序三级联动教程

4、在对应的index.js文件,data对象中初始化对象type_one等

微信小程序三级联动教程

5、在Page对象中,定义第一个下拉框change事件changeOne,传入e;然后劐聂赞陶根据传入值不同,给second数组赋值

微信小程序三级联动教程

6、再次定义第二个下拉框的change事件changeTwo,根据选择的值给第三个下拉框进行赋值

微信小程序三级联动教程

7、保存代码并查看模拟器,选择种类水果,然后点击确定

微信小程序三级联动教程

8、这时子类发生了改变,显示为梨果;点击打开下拉框,可以查看到选项

微信小程序三级联动教程

9、在第二个下拉框选择梨果,这时第三个下拉框显示苹果(梨子)

微信小程序三级联动教程
© 手抄报圈