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

相关文章
|
JavaScript
jQuery 显示隐藏动画 show(); hide(); toggle();
jQuery 显示隐藏动画 show(); hide(); toggle();
68 0
|
5月前
toolbar设置返回键以及点击事件
toolbar设置返回键以及点击事件
78 0
|
11月前
a标签加onclick点击事件
a标签加onclick点击事件
244 0
|
存储 C++ 开发者
QListWidget和QListView的使用和item点击事件
QListWidget和QListView的使用和item点击事件
双击事件与单击事件的那些事
双击事件与单击事件的那些事
513 0
|
数据库
layui时间选择器点击事件
最近写了一个项目用到了layui框架,其中在用到时间选择器控件的时候想做一个点击一个时间可以触发一个事件,然后这个事件可以获取点击的时间,最终通过获取的时间来进行数据库查找,但是无奈怎样也触发不了点击事件,网上同题目的博客很多,大多不是这个问题,接下来我就说一下我是怎么解决的。
332 0
layui时间选择器点击事件
|
数据可视化
UGUI系列-Button绑定事件的多种实现
今天分享一下UGUI Button绑定事件的几种方法,以及优点和缺点 有哪些地方不懂的小伙伴也可以联系我的QQ,我的QQ就在博客链接中隐藏着,看能不能找到咯
|
前端开发
scroll-view实现不了滑动效果
scroll-view实现不了滑动效果
265 0
|
前端开发 Windows
[UWP]使用Picker实现一个简单的ColorPicker弹窗
原文:[UWP]使用Picker实现一个简单的ColorPicker弹窗 在上一篇博文《[UWP]使用Popup构建UWP Picker》中我们简单讲述了一下使用Popup构建适用于MVVM框架下的弹窗层组件Picker的过程。
1134 0