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

相关文章
|
8月前
|
JavaScript 前端开发
事件绑定(onclick,onfocus,onblur)
事件绑定(onclick,onfocus,onblur)
105 0
|
1月前
|
前端开发 开发者
React 单选按钮 Radio Button 详解
本文介绍 React 中单选按钮的基础概念、基本用法、常见问题及进阶技巧,包括如何正确设置 `checked` 属性、确保 `name` 属性一致、处理 `onChange` 事件,以及动态生成单选按钮和使用受控组件等,通过代码示例详细解析,帮助开发者有效管理状态和优化用户交互。
80 32
|
8月前
|
JavaScript 前端开发
事件绑定(onmouseout,onmouseover)
事件绑定(onmouseout,onmouseover)
50 0
|
8月前
|
JavaScript
vant(一)基于picker单选组件自定义picker多选组件~
vant(一)基于picker单选组件自定义picker多选组件~
1033 0
|
JavaScript 前端开发
一行jQuery代码搞定checkbox 全选和全不选
一行jQuery代码搞定checkbox 全选和全不选
101 0
|
存储 C++ 开发者
QListWidget和QListView的使用和item点击事件
QListWidget和QListView的使用和item点击事件
|
数据库
layui时间选择器点击事件
最近写了一个项目用到了layui框架,其中在用到时间选择器控件的时候想做一个点击一个时间可以触发一个事件,然后这个事件可以获取点击的时间,最终通过获取的时间来进行数据库查找,但是无奈怎样也触发不了点击事件,网上同题目的博客很多,大多不是这个问题,接下来我就说一下我是怎么解决的。
354 0
layui时间选择器点击事件
|
数据可视化
UGUI系列-Button绑定事件的多种实现
今天分享一下UGUI Button绑定事件的几种方法,以及优点和缺点 有哪些地方不懂的小伙伴也可以联系我的QQ,我的QQ就在博客链接中隐藏着,看能不能找到咯