uniapp uni-list-item @click,uniapp uni-list-item带参数跳转

<uni-list-item   @click="goDetailsArena(item)"  >
 
goDetailsArena(item) {
				console.log(item)
				// console.log(item);
				let jsonObj = JSON.stringify(item.venueResult)
				uni.navigateTo({
					url: './arenaDetail/arenaDetail?item=' + jsonObj
				})
 },

点击无反应， 需加上link

<uni-list-item   @click="goDetailsArena(item)"  link >

点击跳转，uni.navigateto方法不执行。需加上 :to= 

<uni-list-item direction="column" v-for="(item,index) in venueCollects"     :to="`../../index/arenaDetail/arenaDetail?item=`+indext"  @click="goDetailsArena(item)"
>

如果跳转要传递参数  使用JSON.stringify(item.venueResult)  编码。然后在第二个页面onload方法使用JSON.parse解码。

onLoad(e) {
            this.ChangGuan = JSON.parse(e.item)
            console.log("changguan:" + this.ChangGuan)
        },

<uni-list-item direction="column" v-for="(item,index) in venueCollects"     :to="`../../index/arenaDetail/arenaDetail?item=`+JSON.stringify(item.venueResult)"  @click="goDetailsArena(item)"
					  >

 官方：

组件名：uni-list

代码块： uList、uListItem 关联组件：uni-list-item、uni-badge、uni-icons、uni-list-chat

点击下载&安装(opens new window)

List 列表组件，包含基本列表样式、可扩展插槽机制、长列表性能优化、多端兼容。

在vue页面里，它默认使用页面级滚动。在app-nvue页面里，它默认使用原生list组件滚动。这样的长列表，在滚动出屏幕外后，系统会回收不可见区域的渲染内存资源，不会造成滚动越长手机越卡的问题。

uni-list组件是父容器，里面的核心是uni-list-item子组件，它代表列表中的一个可重复行，子组件可以无限循环。

uni-list-item有很多风格，uni-list-item组件通过内置的属性，满足一些常用的场景。当内置属性不满足需求时，可以通过扩展插槽来自定义列表内容。

内置属性可以覆盖的场景包括：导航列表、设置列表、小图标列表、通信录列表、聊天记录列表。

涉及很多大图或丰富内容的列表，比如类今日头条的新闻列表、类淘宝的电商列表，需要通过扩展插槽实现。

下文均有样例给出。

uni-list不包含下拉刷新和上拉翻页。上拉翻页另见组件：uni-load-more(opens new window)

#介绍

注意事项

为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。

• 组件需要依赖 sass 插件 ，请自行手动安装
• 组件内部依赖 'uni-icons' 、uni-badge 组件
• uni-list 和 uni-list-item 需要配套使用，暂不支持单独使用 uni-list-item
• 只有开启点击反馈后，会有点击选中效果
• 使用插槽时，可以完全自定义内容
• note 、rightText 属性暂时没做限制，不支持文字溢出隐藏，使用时应该控制长度显示或通过默认插槽自行扩展
• 支付宝小程序平台需要在支付宝小程序开发者工具里开启 component2 编译模式，开启方式： 详情 --> 项目配置 --> 启用 component2 编译
• 如果需要修改 switch、badge 样式，请使用插槽自定义
• 在 HBuilderX 低版本中，可能会出现组件显示 undefined 的问题，请升级最新的 HBuilderX 或者 cli

#基本用法

• 设置 title 属性，可以显示列表标题
• 设置 disabled 属性，可以禁用当前项