<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 ?属性,可以禁用当前项
|