picker:选择器

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

picker 组件可以在屏幕底部弹出一个可以滚动选择项目的东西 .. 它的 mode 属性可以设置这个选择器的类型 ..

我们先在页面的初始化数据里面,给 picker 组件准备一组数据 .. 添加一个 items .. 里面添加几个项目 .. 中国 .. 泰国 .. 日本 ..

再添加一个表示当前选择值的数据 .. 这里我们用 pick 来表示 .. 先让它的值等于 0 .. 我们可以使用 picker 组件的 change 事件处理动态的设置这个 pick 的值 ..

比如一会我们用一下 inputHandler 作为 picker 组件的 change 事件处理 .. 在这个方法里面,可以用一下 this.setData 去设置一个数据 .. 要设置的是 pick 这个数据 .. 对应的值设置成 event.detail.value .. 这里事件里的 detail 下面的 value 属性,就是 picker 变化之后的那个值 ..

回到视图文件 .. 用一个 picker 组件 .. 添加一个 range 属性,它的值就是一个可以选择的范围 .. 或者叫可以选择的项目 .. 这里我们给它绑定一个 items .. bindchange ,绑定一个 change 事件 .. 用 inputHandler 来处理 .. 再用 name ,给这个 picker 起个名字 .. 比如 picker

它里面包装一组 view .. 里面嵌套一个text .. 这里可以输出 picker 当前所选择的项目 .. 绑定显示 items 里面的对应的项目 .. 这个项目的索引就是当前 picker 所选择的项目 ..

再到小程序的样式文件 .. 可以给 picker 添加点样式 ...

回到开发者工具 .. 点开这个 picker ... 会出现我们给它绑定的这组数据 .. 这里可以滚动选择某个项目 ..

点一下确定 ..

picker 上会显示当前所选择的项目 ..

picker:选择器《 微信小程序:组件 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点