小程序中一个点击事件传入点击参数,比如是list中的哪个按钮点击的比较奇葩
首先在xml里设置点击事件
<!--index.wxml-->
<view class="container">
<scroll-view scroll-y="true" class="scroll_view">
<block wx:for="{{list}}" wx:for-item="item" wx:key="{{item}}">
<view class="item_container" bindtap="goto_detail" data-book-id="{{item.bookId}}">
<view class="image_container">
<image src="{{item.headpic}}" class="img" mode="scaleToFill" />
</view>
</view>
</view>
</block>
</scroll-view>
</view>
这里设置了一个bindtap = "goto_detail"
再看goto_detail方法:
goto_detail:function(event){
let bookId = event.currentTarget.dataset.bookId
wx.navigateTo({
url:"../bookdetail/bookdetail?bookId="+bookId
})
}
然后看微信官方文档:
在组件中可以定义数据,这些数据将会通过事件传递给 SERVICE。 书写方式: 以data-开头,多个单词由连字符-链接,不能有大写(大写会自动转成小写)如data-element-type,最终在 event.currentTarget.dataset 中会将连字符转成驼峰elementType。
示例:
<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>
Page({
bindViewTap:function(event){
event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
}
})
原文链接:
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html?search-input=dataset
看第三个页面是如何接受值的:
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let bookId = options.bookId
this.setData({
bookId: options.bookId
})
},
直接在onload方法里获取参数就可以了