微信小程序点击for内容跳转到不同页面
时间: 2023-08-06 10:01:45 浏览: 108
要实现微信小程序点击for内容跳转到不同页面,你可以使用WXML标签的`<navigator>`标签。首先,在需要触发跳转的for循环中,给每个需要跳转的内容添加一个唯一的标识符(例如id或index)。然后,在`<navigator>`标签中设置`url`属性为跳转目标页面的路径,同时设置`params`属性为要传递给目标页面的参数。
以下是一个示例代码:
```
<view wx:for="{{list}}" wx:for-item="item" wx:key="id">
<navigator url="/pages/detail/detail?id={{item.id}}&name={{item.name}}">
<view>{{item.name}}</view>
</navigator>
</view>
```
在这个示例中,我们假设`list`是一个包含多个对象的数组,每个对象都有一个唯一的`id`和一个名称`name`。在for循环中,我们使用`<navigator>`标签包围每个名称,并将`url`属性设置为`/pages/detail/detail`,表示跳转到名为`detail`的页面。同时,我们使用`{{item.id}}`和`{{item.name}}`的方式将`id`和`name`传递给目标页面。
在目标页面中,可以通过`onLoad`函数获取传递的参数,例如:
```
Page({
onLoad: function(options) {
console.log(options.id) // 输出传递的id参数
console.log(options.name) // 输出传递的name参数
}
})
```
希望这可以帮助你实现微信小程序点击for内容跳转到不同页面的功能。
阅读全文