【微信小程序点击列表的item带参数跳转界面，传递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
        })
    },

注意

用到了JSON.stringify，JSON.parse，是为了传object类型数据使用，不这样的话，传过来的数据都上[object object]。

刚开始学习微信小程序开发

记录一点自己研究的成果