现在希望对于小程序:
列表中每行的整个区域,点击后,可以获取对应的此处该book的id
之前html中做法是html中加上个hidden的id,book的click的item中获取对应id
现在要去看看小程序中如何支持
先去加上点击事件
小程序点击事件传参
此处只有单一参数,所以暂时去用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
参考:
换用:
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元素中获取值