微信小程序三级联动教程

 时间: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、在第二个下拉框选择梨果,这时第三个下拉框显示苹果(梨子)

微信小程序三级联动教程
  • PS如何使用图层样式制作多重描边效果
  • div+css如何使用flex布局让图片与文字水平对齐?
  • 如何使用CSS3中的flex属性控制元素分块显示
  • Ae细菌效果在哪个位置可以运用
  • Unity3D如何更改编辑器主题
  • 热门搜索
    民族风俗手抄报 九九重阳节手抄报大全 端午节手抄报一等奖 与清明节有关的手抄报 劳动节手抄报简单一点 端午节手抄报怎么画 手抄报图片素材 525心理健康手抄报 中秋节手抄报简单 英语手抄报内容5年级