【微信小程序点击列表的item带参数跳转界面，传递object类型参数】

最新推荐文章于 2024-07-10 21:32:33 发布

原创最新推荐文章于 2024-07-10 21:32:33 发布 · 1.8k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序 #微信

微信小程序开发专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在微信小程序中通过点击列表item实现带参数跳转到详情页面，特别是处理Object类型的参数。关键步骤包括：在列表项上设置data-index属性，通过bindtap事件获取点击的index，使用wx.navigateTo进行跳转，并利用JSON.stringify将Object转换为字符串传递。在详情页，接收到参数后，通过JSON.parse还原Object。示例代码展示了具体实现方式，适合初学者参考。

@微信小程序点击列表的item带参数跳转界面，传递object类型参数

处理思路
获取当前点击列表的下脚标，（data-index="{{index}}"为标记列表的下脚标），通过绑定点击事件带参数跳转到详情页。wx.navigateTo为小程序提供的界面路由跳转的方法。

1.列表页代码编写

home.wxml

<view class="grid-item" wx:for="{{farmListInfo}}" wx:key="index" data-index="{{index}}" bindtap="goFarmList">
        <text>{{item}}</text>
        <text>{{item.farmname}}</text>
        <text>{{index}}</text>
</view>

home.js

data: {
        farmListInfo: [],
        },
goFarmList(e) {
    //这里我们跳转详情界面
    var that = this
    //拿到点击的index下标
    var index = e.currentTarget.dataset.index
    //将对象转为string
    console.log(e)
    console.log(that.data.farmListInfo[index])
    var queryBean = JSON.stringify(that.data.farmListInfo[index])
    wx.navigateTo({
        url: '/pages/farmlist/farmlist?farminfo=' + queryBean,
    })
},

2.详情页代码

farmlist.wxml

<view class="info-list" wx:for="{{farminfo.detail}}" wx:key="farmid">
    <view>{{item.datacollected}},{{item.date}}</view>
</view>

farmlist.js

    onLoad: function (options) {
        var that = this
        var queryBean = JSON.parse(options.farminfo);
        that.setData({
            farminfo: queryBean
        })
    },