微信小程序view组件携带参数跳转页面

假设现在点击某个view需要跳转到小程序内一个新的页面，并希望携带name和sex参数。

场景一（固定传值）

一、WXML代码

<view data-name="Tom" data-sex="man" bindtap="test">view>

二、JS代码

 /**
  * 在此接收参数
  */
test: function (e) {
     
	console.log(e);
	var name = e.currentTarget.dataset.name,
	sex = e.currentTarget.dataset.sex;
	console.log(name);
	console.log(sex);
	// 执行页面跳转
	wx.navigateTo({
     
      url: '页面路径?name=' + name + '&sex=' + sex
    })
}

场景二（动态传值）

一、WXML代码

<view wx:for="{
      {data}}">
	<view data-name="{
      {item.name}}" data-sex="{
      {item.sex}}" bindtap="test">view>
view>

二、JS代码

 /**
  * 在此接收参数
  */
test: function (e) {
     
	console.log(e);
	var name = e.currentTarget.dataset.name,
	sex = e.currentTarget.dataset.sex;
	console.log(name);
	console.log(sex);
	// 执行页面跳转
	wx.navigateTo({
     
      url: '页面路径?name=' + name + '&sex=' + sex
    })
}

总结

若借助view组件进行携带参数跳转，只需在view标签中自定义参数属性即可，格式为：data-参数名。

在函数中接收参数：e.currentTarget.dataset.参数名