微信小程序开发第五篇 动态传参

 

在使用点击事件时，我们可以获得一个对象event,在index.wxml中复制

<view wx:for="{{array}}" wx:key='{{item.id}}' data-id='{{item.id}}' bindtap='clickText' >
 <text >{{item.name}}</text>
</view>

在index.js中复制 

 clickText(e){
    console.log(e)
  })

在控制台查看，就会看见下面的信息

 

官网是这样解释的，

BaseEvent 基础事件对象属性列表：

属性	类型	说明
type	String	事件类型
timeStamp	Integer	事件生成时的时间戳
target	Object	触发事件的组件的一些属性值集合
currentTarget	Object	当前组件的一些属性值集合

这里我们需要看的是currentTarget

currentTarget

事件绑定的当前组件,也就是我们点击的view

属性	类型	说明
id	String	当前组件的id
tagName	String	当前组件的类型
dataset	Object	当前组件上由data-开头的自定义属性组成的集合

我们可以使用dataset来自定义属性来给url动态传参，下面看例子在index.wxml中复制代码

<view wx:for="{{array}}" wx:key='{{item.id}}' data-id='{{item.id}}' bindtap='clickText' >
 <text >{{item.name}}</text>
</view>

在index.js中定义变量arry 和写bindtap事件

然后看我们console.log(e)的属性

可以看见datase中有我们自己定义的data-id的信息了，我们拿到这个ID后就可以动态的给url传参了

clickText(e){
  
    this.setData({ newArID: e.currentTarget.dataset.id})
    console.log(this.data.newArID)
  wx.navigateTo({
    url: '../firstPage/first?id=' + this.data.newArID,
  })

 

我们再看../firstPage/first页面中，获取传过来的参数

在监听页面加载的生命周期中，console.log(options)就可以看到传过来的参数了，这样我们就拿到了ID，也就可以做其他的请求数据了