微信小程序表单类组件picker普通选择器使用详解

 时间:2024-10-13 04:55:12

1、先百度搜索查看 picker 滚动选择器组件的官方文档,通过设置其 mode 属性的值可使用不同的滚动选择器,不同的选择器除了公共属性外,还会有一些特殊熟悉。本篇经验分享普通选择器的相关内容(即 mode = 'selector')。

微信小程序表单类组件picker普通选择器使用详解

2、在 wxml 文件中,通过 <picker> 标签创建一个普通选择器,酋篚靶高需注意如下:1. 不设置 mode 属性的值,默鹚剖蛲蛋认为 'selector' 即普通选择器;2. 使用动态绑定的方式绑定选择器的 range 属性和 value 属性值,前者表示选择器的所有可选项,后者表示默认选择的项目;3. 在标签内部通过视图容器组件 view 来显示当前选择器选择的条目内容。 关于属性的动态绑定,可以参考如下引用经验。

微信小程序表单类组件picker普通选择器使用详解

3、在 js 文件中定义上述 wxml 动态绑定中所使用变量的初始值,以及所绑定的选择器改变后的事件回调函数。

微信小程序表单类组件picker普通选择器使用详解

4、在 wxss 文件中声明 wxml 文件中所使用的类对应的样式定义。

微信小程序表单类组件picker普通选择器使用详解

5、保存编译后,在模拟器中查看页面显示效果,符合预期,点击选择器,可以选择其他选项,并触发绑定的事件回调函数。

微信小程序表单类组件picker普通选择器使用详解
  • lightroom高级调色教程
  • 如何制作吸塑字
  • php怎么遍历数组元素
  • Photoshop三文治面包修图调色
  • PS制烽烧焦老照片效果
  • 热门搜索
    理想的手抄报 有关保护环境的手抄报 有关于环保的手抄报 小学生法制手抄报资料 手抄报模板设计 一年级手抄报内容 讲文明懂礼貌手抄报 交通安全小报手抄报 青春的手抄报 节约用水用电手抄报