小程序---navigator

本文介绍了在小程序中如何利用navigator组件实现列表点击跳转,并通过url传参传递不同标识,以便在目标页面动态显示相应内容。详细讲述了在test和test2页面间如何利用navigator和onload函数处理传参,实现更优雅的列表跳转效果。
摘要由CSDN通过智能技术生成

在小程序里面,实现一个点击跳转事件,通常会用上bindtap,再在事件里使用wx.navigateTo指定跳转页面。但如果我们的原页面是一个渲染的列表,每个项都有一个跳转事件,而且跳转进去的页面大体相同,除了给它们一个个加上bindtap以外,还有什么更好的办法呢?navigator这时就派上用场了。
模拟效果
这里用到两个页面:test/test和test2/test2

test

test.wxml
在navigator里设置循环内容,注意navigator的url一定要设置路径,为了给每个列表添加一个标识,好让点击跳转时显示不同内容,我们可以通过路径传参itemId={ { item.id}}把id传到子页面。

<navigator wx:for='{
    {imgUrl}}' wx:key="id" url="../test2/test2?itemId={
    {item.id}}">
  <image src='{
    {item.img}}' style='width</
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值