uni-app 即时聊天：制作分组导航

你的名字 2022-11-29 05:46 179阅读 0赞

## 样式图 ##

![在这里插入图片描述][20200819150320327.jpg_pic_center]

## 效果图 ##

![在这里插入图片描述][2020081915035396.gif_pic_center]

## 制作方法 ##

### 用户分组 ###

制作分组导航首先要做的就是将用户分组，在这个项目中我是根据用户昵称的首字母来进行分组的，所以就需要将汉字转为拼音，转换的方法大家可以在网上搜索，另外就是这个操作你可以在前端执行也可以在后端执行，当然还是在前端执行比较好，我是在后端执行好的，只作为参考，方法如下：

最终返回给前端的好友分组数据格式（示例）如下：

//每个分组的是一个数组，数组里面包含着对应的用户对象
    //每个用户对象都有对应的属性（这里省略不写）
    { 
    	A:[{ },{ }]	
    	B:[{ },{ },{ }]
            C:[{ },{ }]
    	D:[{ },{ }]
    	E:[]
    	...
    }

数据接收到后就可以在前端展示出来

<template v-for="(value, key, index) in getFriends"> 
    	<view class="ground" v-if="value.length > 0">
    
    		
    		<view class="ground-item" :id="key">{
       { key }}</view>
    
    		
    		<view class="item" 
    		      v-for="(item, index) in value" 
                          :key="item._id" 
                          @tap="goInfo(item.user._id)">
    	              <view class="item-left">
    				<view class="imgbox">
    					<image :src="item.user.avatars" mode="aspectFill">
    					</image>
    				</view>
    		      </view>
    		      <view class="item-right">{
       { item.nickName }}</view>
    		</view>
    	 </view>
    </template>

### 制作分组导航条 ###

![在这里插入图片描述][20200819150425886.png_pic_center]

制作这个的方式是比较简单的，方法如下  
**js代码**

// 生成左侧的字母导航条
    getAlphabet() {  
    	//这种方式是生成26个字母，但是可能有的分组是没有好友的
    	// for (var i = 0; i < 26; i++) { 
    	// let res = String.fromCharCode(65 + i);
    	// this.alphabet.push(res);
    	// }
    	this.alphabet = []
    
    	//这种是根据分组是否有好友，有则生成对应分组，没有则不生成分组
    	for (let key in this.getFriends) { 
    		if (this.getFriends[key].length > 0) { 
    			this.alphabet.push(key);
    		}
    	}
    },

**html代码**

/* data-value 是自定义属性，需要根据这个来知道应该跳转的分组是哪个*/
    <view class="alnavbar" @tap="clickAlnavbar">
    	<view class="al-item" data-value="top">↑</view>
    	<view class="al-item" 
    	      v-for="(item, index) in alphabet" 
                  :key="index" 
                  :data-value="item"
                  >
                  {
       { item }}
           </view>
    </view>

### 跳转的方法 ###

// 点击左边的字母导航进行跳转
    clickAlnavbar(event) { 
    	//每次跳转的时候先返回到顶部，避免计算出错
    	uni.pageScrollTo({ 
    		duration: 0,
    		scrollTop: 0
    	});
    	if (event.target.dataset.value == 'top') {  
    	//这是返回顶部，因为跳转的时候都是先返回到顶部，所以不需要继续执行以下代码
    		return;
    	}
    	let id = '#' + event.target.dataset.value;
    	uni.createSelectorQuery()
    		.select(id)
    		.boundingClientRect(res => { 
    			if (res) { 
    				let top = res.top;
    				// #ifdef APP-PLUS
    				uni.pageScrollTo({ 
    					duration: 0,
    					scrollTop: top - 68
    				});
    				// #endif
    				// #ifdef H5
    				uni.pageScrollTo({ 
    					duration: 0,
    					scrollTop: top - 48
    				});
    				// #endif
    			}
    		})
    		.exec();
    },

[20200819150320327.jpg_pic_center]: /images/20221124/4d75a71f07be49c5abc358b2d1bfd526.png
[2020081915035396.gif_pic_center]: /images/20221124/dc5b5fd8f745484b865c8c9ff129166b.png
[20200819150425886.png_pic_center]: /images/20221124/84a4d0dbc89f4a4db830dfac68ecb61e.png