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 就是用户选择的内容,可以用来做后续的操作。

相关文章
|
25天前
|
前端开发 JavaScript API
Popover
【10月更文挑战第20天】
21 6
|
6月前
|
JavaScript 容器
模态框(Modal
模态框(Modal)是一种用于在网页上展示重要信息或功能的交互式窗口。它通常在页面顶部或页面中部弹出,覆盖在页面之上,使页面部分内容不可见,直到模态框被关闭。模态框可以包含文本、图像、表单、按钮等元素,用于向用户展示信息、获取用户输入或执行其他操作。
204 4
|
6月前
|
JavaScript
vant(一)基于picker单选组件自定义picker多选组件~
vant(一)基于picker单选组件自定义picker多选组件~
800 0
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
403 1
|
小程序
button按钮组件
button按钮组件
|
存储 C++ 开发者
QListWidget和QListView的使用和item点击事件
QListWidget和QListView的使用和item点击事件
element-ui框架的el-dialog弹出框被遮罩层挡住了
element-ui框架的el-dialog弹出框被遮罩层挡住了
335 0
element-ui框架的el-dialog弹出框被遮罩层挡住了
element-ui:el-dialog遮罩层变黑
element-ui:el-dialog遮罩层变黑
539 0