最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】小程序中给点击事件函数传递参数或从html元素中获取值

程序 crifan 298浏览 0评论
现在希望对于小程序:
列表中每行的整个区域,点击后,可以获取对应的此处该book的id
之前html中做法是html中加上个hidden的id,book的click的item中获取对应id
现在要去看看小程序中如何支持
先去加上点击事件
小程序点击事件传参
微信小程序-bindtap等事件传参 – 前端向朔 – CSDN博客
微信小程序-参数传递 – 简书
微信小程序:bindtap等事件传参 – 诸葛风流 – 博客园
微信小程序学习-传递参数的3种方式-新手教程-小程序社区-微信小程序-微信小程序开发社区-小程序开发论坛-微信小程序联盟
此处只有单一参数,所以暂时去用id试试
可行之后,再去换用dataset
此处空的callback函数中也可以看到:
currentTarget中的dataset和id
先去加上id试试:
  <view class='search_result_books'>
    <view
      id="{{curBookItem.id}}"
      wx:for="{{searchBookList}}"
      wx:for-index="bookIdx"
      wx:for-item="curBookItem"
      wx:key="id"

      class='book_list_item'
      bindtap='bookItemClickCallback'
    >
但是在加id的时候,担心:
此时处于在for循环中:
wx:for-item=”curBookItem”
刚刚指定的curBookItem
在当前view中能用
curBookItem.id
吗?
去试试再说
是可以的:
再去看看click的event中,能否获取到id值:
是可以获取到的:
然后用:
var curBookId = e.currentTarget.dataset.id
var curBookId = e.currentTarget.dataset["id"]
都是:undefined
参考:
https://blog.csdn.net/u013778905/article/details/59129272
换用:
var curBookId = e.currentTarget.id
相关代码:
  bookItemClickCallback: function(e){
    console.log("bookItemClickCallback: e=%o", e)
    //redirect to detail page
    // var curBookId = e.currentTarget.dataset.id
    // var curBookId = e.currentTarget.dataset["id"] // undefined
    var curBookId = e.currentTarget.id // 5bd7bf97bfaa44fe2c7415d9
    console.log("curBookId=%s", curBookId)
  },
才获取到值:
后来从log中发现是自己之前看错了:
不是dataset中的id,而是:currentTarget下面的id
其他参数可以通过:
<view bindtap="clickCallback" data-otherVariableName="{{otherVariableValue}}">
去传递到:
e.currentTarget.dataset
随便去试试:
  bookItemClickCallback: function(e){
    console.log("bookItemClickCallback: e=%o", e)
    //redirect to detail page
    // var curBookId = e.currentTarget.dataset.id
    // var curBookId = e.currentTarget.dataset["id"] // undefined
    var curBookId = e.currentTarget.id // 5bd7bf97bfaa44fe2c7415d9
    console.log("curBookId=%s", curBookId)

    var difficulty = e.currentTarget.dataset.difficulty
    // var difficulty = e.currentTarget.dataset["difficulty"]
    console.log("difficulty=%s", difficulty)
  },
和:
  <view class='search_result_books'>
    <view
      id="{{curBookItem.id}}"
      wx:for="{{searchBookList}}"
      wx:for-index="bookIdx"
      wx:for-item="curBookItem"
      wx:key="id"

      class='book_list_item'
      bindtap='bookItemClickCallback'
      data-difficulty="{{curBookItem.grading.difficulty}}"
    >
效果:
【总结】
对于点击事件:
  • 普通html中叫做:click
    • on click
  • 小程序中叫做:tap
    • bindtap
在小程序中挂载了点击事件的callback函数:
index.wxml
  <view class='search_result_books'>
    <view
      id="{{curBookItem.id}}"
      wx:for="{{searchBookList}}"
      wx:for-index="bookIdx"
      wx:for-item="curBookItem"
      wx:key="id"

      class='book_list_item'
      bindtap='bookItemClickCallback'
      data-difficulty="{{curBookItem.grading.difficulty}}"
    >
以及对应的js中的函数:
index.js
  bookItemClickCallback: function(e){
    console.log("bookItemClickCallback: e=%o", e)
    //redirect to detail page
    var curBookId = e.currentTarget.id // 5bd7bf97bfaa44fe2c7415d9
    console.log("curBookId=%s", curBookId)

    var difficulty = e.currentTarget.dataset.difficulty
    // var difficulty = e.currentTarget.dataset["difficulty"]
    console.log("difficulty=%s", difficulty)
  },
即可获取到:
  • 单个参数且是id:
    • 对于普通的,单个要传递的值,往往是id,这时候就可以
      • wxml中:id=”{{yourIdValue}}”
      • js中:e.currentTarget.id
    • 而获取到id值
  • 多个其他参数:
    • 对于更多的,其他的(多个)参数,可以通过dataset:
      • wxml中:data-otherVariableName=”{{otherVariableValue}}”
      • js中:
        • e.currentTarget.dataset.otherVariableName
        • 或:
        • e.currentTarget.dataset[“otherVariableName”]
    • 而获取到otherVariableName的值:otherVariableValue

转载请注明:在路上 » 【已解决】小程序中给点击事件函数传递参数或从html元素中获取值

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
84 queries in 0.145 seconds, using 20.71MB memory