一、原生按钮 pages.json里

{ "path": "uni_modules/uni-im/pages/index/index", "style": { "navigationBarTitleText": "会话列表", "enablePullDownRefresh": false, "app-plus": { "titleNView": { "titleAlign": "center", "titleWidth": "50%", "buttons": [ { "index": 0, "color": "#999999", "colorPressed": "#38BC48", "float": "right", "text": "通讯录", "fontSize": 14, "width": "70px", "padding": "0 5px" }, { "index": 1, "color": "#999999", "colorPressed": "#38BC48", "float": "left", "text": "用户列表", "fontSize": 14, "width": "80px", "padding": "0 5px" } ] } } } }

跳转方式：

onNavigationBarButtonTap(e) {}

// ✅ 原生导航栏按钮专属监听方法，和im-sample的按钮逻辑完全一致 onNavigationBarButtonTap(e) { // e.index对应pages.json里buttons数组的index值 // 你现在的配置：index:0是右侧「通讯录」，index:1是左侧「用户列表」 console.log('点击了原生按钮，index:', e.index); // 先打印确认监听正常 switch(e.index) { case 0: // 右侧：通讯录 uni.navigateTo({ url: '/uni_modules/uni-im/pages/contacts/contacts' }); break; case 1: // 左侧：用户列表 uni.navigateTo({ url: '/uni_modules/uni-im/pages/userList/userList' }); break; } }

二、页面里的跳转按钮：

<!-- #ifdef APP --> <view class="app-nav-btns"> <text @click="toContacts" class="nav-btn">通讯录</text> <text @click="toUserList" class="nav-btn">用户列表</text> </view> <!-- #endif -->

跳转方法：

toContacts() { uni.navigateTo({ url: '/uni_modules/uni-im/pages/contacts/contacts' }); }, toUserList() { uni.navigateTo({ url: '/uni_modules/uni-im/pages/userList/userList' }); }