最近在用uniapp做一个项目的时候用到uni-list-chat组件，并想点击实现进一步的功能，但是uni-list-chat组件的点击事件在浏览器和微信小程序开发工具中运行正常，在真机模拟时无法响应点击事件。不知道是不是bug。
官方文档是这么说的：
聊天列表示例
- 设置
clickable为true，则表示这是一个可点击的列表，会默认给一个点击效果，并可以监听click事件 - 设置
link属性，会自动开启点击反馈，link的值表示跳转方式，如果不指定，默认为navigateTo - 设置
to属性，可以跳转页面 time属性，通常会设置成时间显示，但是这个属性不仅仅可以设置时间，你可以传入任何文本，注意文本长度可能会影响显示avatar和avatarList属性同时只会有一个生效，同时设置的话，avatarList属性的长度大于1 ，avatar属性将失效- 可以通过默认插槽自定义列表右侧内容
-
<uni-list> <uni-list :border="true"> <!-- 显示圆形头像 --> <uni-list-chat :avatar-circle="true" title="uni-app" avatar="https://web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" note="您收到一条新的消息" time="2020-02-02 20:20" ></uni-list-chat> <!-- 右侧带角标 --> <uni-list-chat title="uni-app" avatar="https://web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-text="12"></uni-list-chat> <!-- 头像显示圆点 --> <uni-list-chat title="uni-app" avatar="https://web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat> <!-- 头像显示角标 --> <uni-list-chat title="uni-app" avatar="https://web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="99"></uni-list-chat> <!-- 显示多头像 --> <uni-list-chat title="uni-app" :avatar-list="avatarList" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat> <!-- 自定义右侧内容 --> <uni-list-chat title="uni-app" :avatar-list="avatarList" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot" @click="handleItemClick"> <view class="chat-custom-right"> <text class="chat-custom-text">刚刚</text> <!-- 需要使用 uni-icons 请自行引入 --> <uni-icons type="star-filled" color="#999" size="18"></uni-icons> </view> </uni-list-chat> </uni-list> </uni-list> <script> export default { data() { return { avatarList: [{ url: 'https://web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png' }, { url: 'https://web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png' }, { url: 'https://web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png' }] } }, methods: { handleItemClick(id) { console.log("点击了", id) uni.navigateTo({ url: './detail?id=' + id }) }, </script> <style> .chat-custom-right { flex: 1; /* #ifndef APP-NVUE */ display: flex; /* #endif */ flex-direction: column; justify-content: space-between; align-items: flex-end; } .chat-custom-text { font-size: 12px; color: #999; } </style>ListItemChat Props
属性名 类型 默认值 说明 title String - 标题 note String - 描述 clickable Boolean false 是否开启点击反馈 badgeText String - 数字角标内容，设置为 dot将显示圆点badgePositon String right 角标位置 link String navigateTo 是否展示右侧箭头并开启点击反馈，可选值见下表 to String - 跳转页面地址，如填写此属性，click 会返回页面是否跳转成功 time String - 右侧时间显示 avatarCircle Boolean false 是否显示圆形头像 avatar String - 头像地址，avatarCircle 不填时生效 avatarList Array - 头像组，格式为 [{url:''}] # Link Options
属性名 说明 navigateTo 同 uni.navigateTo() redirectTo 同 uni.reLaunch() reLaunch 同 uni.reLaunch() switchTab 同 uni.switchTab()
运行效果如下图
按照官方文档要求，设置 clickable 为 true ，则表示这是一个可点击的列表，会默认给一个点击效果，并可以监听 click 事件。但是真机模拟时无法响应点击事件，最后采用另一种方法：
- 设置
link属性，会自动开启点击反馈，link的值表示跳转方式，如果不指定，默认为navigateTo - 设置
to属性，可以跳转页面 -
<uni-list-chat :title="'申请人：'+item.proposer" :avatar="giveAvatar(item)" :note="'被申请人：'+item.respondent" link :to="'./detail?id=' + item._id"> <view class="chat-custom-right"> <view class="chat-custom-right-up"> <uni-dateformat :threshold="[7200000, 8640000000]" format="yyyy年M月d日" :date="item.proposal_date"></uni-dateformat> <text>申请</text> </view> <view :class="item.status.className"> <text class="chat-custom-text">{ {item.status.step}}</text> </view> </view> </uni-list-chat>将要跳转的页面直接拼接复制给to，真机可以正常运行了。
-
“检索助手”小程序已经更名为“智慧助手”，欢迎品鉴。