小程序点击事件是怎么传参的。页面跳转传值

系统管理员 2023-10-11 12:42 5阅读 0赞

如果一个轮播图，点击图片进入详情。在这个点击事件上就要知道当前点击的是哪个图片。也就是想获取这个图片的id。

我们需要定义一个"data-自定义的参数名"的参数，里面放这个图片的id。或者是任意的你想要传的参数.

获取的是event.currentTarget.dataset.自定义的参数名。

比如下面我也data-no定义的参数。获取就是event.currentTarget.dataset.no。

如果data-number.获取就是event.currentTarget.dataset.number。

> <swiper indicator-dots="\{ \{indicatorDots\}\}"
> 
> autoplay="\{ \{autoplay\}\}" interval="\{ \{interval\}\}" duration="\{ \{duration\}\}">
> 
> <block wx:for="\{ \{imgUrls\}\}" wx:key="\{ \{index\}\}">
> 
> <swiper-item bindtap="sliderTo" data-no='\{ \{item.id\}\}'>
> 
> \{ \{index\}\}
> 
> <image src="\{ \{item.url\}\}" class="slide-image" width="355" height="150" />
> 
> </swiper-item>
> 
> </block>
> 
> </swiper>

> Page(\{
> 
> data: \{
> 
> imgUrls: \[
> 
> \{url:'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',id:'0'\},
> 
> \{ url: 'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640', id: '1' \},
> 
> \{ url: 'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640', id: '2' \},
> 
> \],
> 
> indicatorDots: false,
> 
> autoplay: false,
> 
> interval: 5000,
> 
> duration: 1000
> 
> \},
> 
> sliderTo:function(event)\{
> 
> console.log(event)
> 
> \},
> 
> \})

最后打印的内容是。我们可以看到currentTarget里面有个dataset.里面有个no就是我们点击的那个id啦。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70][]

页面跳转传值

通过？参数名=参数值。直接传参。

> sliderTo:function(event)\{
> 
> this.setData(\{
> 
> leassonId: event.currentTarget.dataset.id
> 
> \})
> 
> wx.navigateTo(\{
> 
>              url: '../detail/detail?id=' + this.data.leassonId
> 
> \})
> 
> \},

获取页面。在onLoad事件里面获取options

onLoad: function (options) \{

console.log(options)

\},

![20190923175953619.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190923173003364.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0,size_16,color_FFFFFF,t_70
[20190923175953619.png]: https://img-blog.csdnimg.cn/20190923175953619.png