picker bindchange="bindPickerChange" 点击事件

简介: picker bindchange="bindPickerChange" 点击事件

picker 是微信小程序的一个组件,它可以用来展示和选择一组选项。当用户选中某一项时,会触发 bindchange 事件,可以用此事件来处理选中项的变化。以下是如何利用 bindchange 事件的例子:

  1. 在 .wxml 文件中定义 picker 组件及其对应的事件处理器
<view class="container">
  <picker bindchange="bindPickerChange" value="{
    {index}}" range="{
    {array}}">
    <view class="weui-cell__hd">学校:</view>
    <view class="weui-cell__bd">{
  {array[index]}}</view>
    <view class="weui-cell__ft"><i class="weui-icon-down"></i></view>
  </picker>
</view>
  1. 在 .js 文件中定义 eventHandler 并更新数据
Page({
   
  data: {
   
    array: ['北京大学', '清华大学', '浙江大学'],
    index: ''
  },
  bindPickerChange: function(e) {
   
    console.log('picker发送选择改变,携带值为', e.detail.value)
    this.setData({
   
      index: e.detail.value
    });
  }
})
  1. 在需要的位置处理选择结果

bindPickerChange 中,可以根据 e.detail.value 来处理选中项的变化,例如:

bindPickerChange: function(e) {
   
  console.log('picker发送选择改变,携带值为', e.detail.value)
  let selectedSchool = this.data.array[e.detail.value];
  console.log(selectedSchool);
  this.setData({
   
    index: e.detail.value,
  });
}

在上述代码中,selectedSchool 就是用户选择的内容,可以用来做后续的操作。

相关文章
|
19天前
|
JavaScript 前端开发
事件绑定(onclick,onfocus,onblur)
事件绑定(onclick,onfocus,onblur)
32 0
|
9月前
|
JavaScript
jQuery 显示隐藏动画 show(); hide(); toggle();
jQuery 显示隐藏动画 show(); hide(); toggle();
47 0
|
10月前
mui 左右滑动效果
mui 左右滑动效果
149 0
|
19天前
|
移动开发 小程序 JavaScript
uView Button 按钮
uView Button 按钮
33 2
|
7月前
a标签加onclick点击事件
a标签加onclick点击事件
|
10月前
|
小程序
button按钮组件
button按钮组件
|
11月前
用 mouse 事件写一个可拖拽的 div
用 mouse 事件写一个可拖拽的 div
54 0
|
12月前
|
存储 C++ 开发者
QListWidget和QListView的使用和item点击事件
QListWidget和QListView的使用和item点击事件
双击事件与单击事件的那些事
双击事件与单击事件的那些事
471 0