微信小程序开发（2 wxml）-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41810184/article/details/90739560

本文详细介绍了小程序中按钮组件的点击事件处理及数据传递方法，包括如何通过bindtap调用JS函数并传递参数，以及如何利用scroll-view和block循环展示数组数据。此外，还涉及了勾选框的数据传递技巧和链接的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.按钮（button）组建点击事件与传值

 <button class='login_button' id='{{item.id}}' data-time='{{item.createTimeStr}}' data-name='{{item.passbookName}}' bindtap='useAction'>立即使用</button>

1.bindTap，点按事件的调用方法名，在该例子中，点击按钮调用对应js文件Page对象中的useAction方法

2.传值，可以通过按钮的id属性，也可以自定义data-xxx（xxx是自己定义的名字）属性，不管通过哪一种方式，都需要bindTap对应的function入参声明传入event对象，如果采取button中id属性传值，则要通过event.currentTarget.id在方法里获取，如果通过data-xxx传值，则要通过event.currentTarget.dataset.xxx获取

useAction: function(event) {
    //id
    var id = event.currentTarget.id;
    console.info(event.currentTarget);
    //data-time
    var time = event.currentTarget.dataset.time;
    //data-name
    var name = event.currentTarget.dataset.name;
      //do something
    });

二.数组展示

1.scroll-view 滑动展示、block数组展示，for后面跟数组名称（在对应的Page对象的data中定义），item是数组中每个元素的名称

  <scroll-view scroll-y="true"> 
    <block wx:for="{{unusedPassbookIssue}}">
        <text class='login_lable2'>名称: {{item.passbookName}} <br /></text>
      </block>
 </scroll-view>

三勾选框传值

四链接