微信小程序之页面跳转在数组中加上跳转的目标地址

最新推荐文章于 2023-03-13 21:37:42 发布

清风思月

最新推荐文章于 2023-03-13 21:37:42 发布

阅读量2.1k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： WeChat 文章标签：微信小程序页面跳转 wx.for

本文链接：https://blog.youkuaiyun.com/zhaoguanghe/article/details/80049050

WeChat 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种在微信小程序中实现列表项点击跳转的方法，通过wx.for循环遍历列表并为每个item设置唯一标识，利用bindtap事件绑定和dataset传递参数实现不同列表项跳转至不同页面的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当使用wx.for显示列表的时候，从列表的item项跳转到下一个页面，需要点击不同的列表跳转到不同的页面。
index.wxml
<view class="carts-item"  wx:for="{{items}}" bindtap="navito" data-object-id="{{item.id}}">
      <view class="carts-text">
        <text class="carts-title">{{item.name}}</text>
      </view>
</view>

index.js
data: {
items:[
      {id:"1",name:"xxxxx"},
      {id:"2",name:"yyyyy"},
    ],   
Url:[
      '../xxx/xxx',
      '../yyy/yyy'
    ]
 }

navito: function (e) {
    // 点击不同的列表跳转到列表详情
    var that=this;
    var id = e.currentTarget.dataset.objectId-1;
    wx.navigateTo({
      url: that.data.Url[id]
    });
  }