vue+uview实现仿微信通讯录（提醒谁看功能）

最新推荐文章于 2024-07-02 16:56:15 发布
最新推荐文章于 2024-07-02 16:56:15 发布
阅读量1.8k 收藏 2
点赞数
文章标签： vue.js 微信 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gyz15731998001/article/details/127046963
版权

实现功能如下图：(索引列表加头像和选择框，选择好的好友在顶部展示出来)

首先引入uview里面的索引列表组件：(用于展示好友列表)

<view class="" style="width: 700rpx;margin: 0 auto;">
            <u-index-list :index-list="indexList" @select="selectFn" activeColor="#c0c0c0">
                <template v-for="(item, index) in itemArr" bgColor="#fff">
                    <!-- #ifdef APP-NVUE -->
                    <u-index-anchor :text="indexList[index]" bgColor="#fff"></u-index-anchor>
                    <!-- #endif -->
                    <u-index-item bgColor="#fff">
                        <!-- #ifndef APP-NVUE -->
                        <u-index-anchor :text="indexList[index]" bgColor="#fff"></u-index-anchor>
                        <!-- #endif -->
                        <view class="list-cell" v-for="(item1, index1) in item" bgColor="#fff">
                            <u-checkbox-group>
                                <u-checkbox :customStyle="{marginBottom: '8px'}" shape="circle" @change="change(item1)">
                                </u-checkbox>
                            </u-checkbox-group>
                            <view class="">
                                <img :src="item1.avatar" alt=""
                                    style="width: 90rpx;height: 90rpx;border-radius: 50%;margin-right: 20rpx;">
                            </view>
                            <view class="">
                                {{item1.friendNote}}
                            </view>
                        </view>
                    </u-index-item>
                </template>
            </u-index-list>
        </view>

当点击选择请前面的选择框时，触发change事件（组件内方法）：

change(e) {
                console.log(e)
                //新建userlist和userlistimg空数组，将返回值push进去
                this.userlist.push(e.friendId);
                this.userlistimg.push(e.avatar);
                // userlistimg
                // console.log(this.userlist)
                //删除数组中重复的元素（昵称和头像）
                for (var i = 0; i < this.userlist.length; i++) {
                    for (var j = i + 1; j < this.userlist.length; j++) {
                        if (this.userlist[i] == this.userlist[j]) { //第一个等同于第二个， 
                          splice方法删除第二个
                            // this.userlist.splice(j, 1);

                            this.$delete(this.userlist, j)
                            this.$delete(this.userlist, i)
                            j--;
                        }
                    }
                }
                
                for (var i = 0; i < this.userlistimg.length; i++) {
                    for (var j = i + 1; j < this.userlistimg.length; j++) {
                        if (this.userlistimg[i] == this.userlistimg[j]) { //第一个等同于第二 
                           个，splice方法删除第二个
                            // this.userlist.splice(j, 1);
                
                            this.$delete(this.userlistimg, j)
                            this.$delete(this.userlistimg, i)
                            j--;
                        }
                    }
                }

                this.listimg = this.userlistimg
                console.log(this.userlistimg) //打印处理后的数组
            },

上面的顶部展示出来用的是uniapp的scroll-view：

<view class="topline">
            <view class="">
                <scroll-view class="typeScroll" scroll-x="true" @scroll="scroll" scroll-left="10">
                    <!-- <view v-for="(item,index) in 5" :key="index" class="sceneItem1">
                        拉取
                    </view> -->
                    
                        <img :src="item" alt="" class="Scrollimg" v-for="(item,index) in listimg" :key="index" >
                    //此处循环的数组就是上面代码中处理好的头像数组
                    
                    <!-- <view id="demo1" v-for="item in 32" class="sceneItem1">A</view> -->
                </scroll-view>
            </view>
            <view class="xinshan-topR" @click="confirm">
                确定
            </view>
        </view>

其中class类的展示如下：

.topline {
        width: 690rpx;
        margin: 0 auto;
        // background-color: pink;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .xinshan-topR {
        width: 138rpx;
        height: 50rpx;
        background: #F2853C;
        border-radius: 4rpx;
        opacity: 1;
        font-size: 28rpx;
        font-weight: normal;
        color: #FFFFFF;
        text-align: center;
        line-height: 50rpx;
    }
    .typeScroll {
        // margin-left: 40rpx;
        margin-bottom: 30rpx;
        width: 500rpx;
        // background: #e7e7e7;
        white-space: nowrap;
        margin-top: 36rpx;

        .Scrollimg {
            display: inline-block;
            width: 64rpx;
            height: 64rpx;
            border-radius: 50%;
            margin-right: 10rpx;
        }

        .sceneItem1 {
            display: inline-block;
            // width: 22%;
            // margin-left: 44rpx;
            margin-right: 20rpx;
            text-align: center;
            // min-height: 38rpx;
            width: 126rpx;
            height: 64rpx;
            background: #00B578;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            opacity: 1;
            font-size: 28rpx;
            line-height: 64rpx;
            font-weight: 500;
            color: #FFFFFF;

        }

        .sceneItem2 {
            display: inline-block;
            // width: 22%;
            margin-left: 44rpx;
            text-align: center;
            // min-height: 38rpx;
            width: 126rpx;
            height: 64rpx;
            background: #FAFAFA;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            opacity: 1;
            font-size: 28rpx;
            line-height: 64rpx;
            font-weight: 500;
            color: #9B9B9B;

        }
    }

（下面是data里面的数据）：

return {
				value: "",
				listimg: [
					// "https://cdn.uviewui.com/uview/album/2.jpg",
					// "https://cdn.uviewui.com/uview/album/2.jpg",
					// "https://cdn.uviewui.com/uview/album/2.jpg",
					// "https://cdn.uviewui.com/uview/album/2.jpg",
					// "https://cdn.uviewui.com/uview/album/2.jpg",
					// "https://cdn.uviewui.com/uview/album/2.jpg",
					// "https://cdn.uviewui.com/uview/album/2.jpg",
					// "https://cdn.uviewui.com/uview/album/2.jpg",
					// "https://cdn.uviewui.com/uview/album/2.jpg",
					// "https://cdn.uviewui.com/uview/album/2.jpg",
					// "https://cdn.uviewui.com/uview/album/2.jpg",
					// "https://cdn.uviewui.com/uview/album/2.jpg",
				],
				list: [{
					"letter": "A",
					"data": [
						/* {
							name: "哈苏觉得会爱上",
							avatar: "https://cdn.uviewui.com/uview/album/2.jpg"
						}, */

						"https://cdn.uviewui.com/uview/album/2.jpg",
						"包头机场",
						"北海福成机场",
						"北京南苑机场",
						"北京首都国际机场"
					]
				}, {
					"letter": "B",
					"data": [
						"保山机场",
						"包头机场",
						"北海福成机场",
						"北京南苑机场",
						"北京首都国际机场"
					]
				}],
				userlist: [],
				userlistimg: [],
				indexList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S",
					"T", "U", "V", "W", "X", "Y", "Z", "#"
				],
				test: [],
				itemArr: [
					[{
							name: "过一组1",
							url: "https://cdn.uviewui.com/uview/album/1.jpg"
						},
						{
							name: "水电费2",
							url: "https://cdn.uviewui.com/uview/album/1.jpg"
						},
						{
							name: "水电费3",
							url: "https://cdn.uviewui.com/uview/album/1.jpg"
						},

					],
					[{
							name: "过一组4",
							url: "https://cdn.uviewui.com/uview/album/1.jpg"
						},
						{
							name: "水电费5",
							url: "https://cdn.uviewui.com/uview/album/1.jpg"
						},
						{
							name: "水电费6",
							url: "https://cdn.uviewui.com/uview/album/1.jpg"
						},
						{
							name: "水电费7",
							url: "https://cdn.uviewui.com/uview/album/1.jpg"
						},

					],
					[{
							name: "过一组8",
							url: "https://cdn.uviewui.com/uview/album/1.jpg"
						},
						{
							name: "水电费9",
							url: "https://cdn.uviewui.com/uview/album/1.jpg"
						},
						{
							name: "水电费10",
							url: "https://cdn.uviewui.com/uview/album/1.jpg"
						},
						{
							name: "水电费11",
							url: "https://cdn.uviewui.com/uview/album/1.jpg"
						},
						{
							name: "水电费12",
							url: "https://cdn.uviewui.com/uview/album/1.jpg"
						}
					],
					[{
							name: "过一组13",
							url: "https://cdn.uviewui.com/uview/album/1.jpg"
						},
						{
							name: "水电费14",
							url: "https://cdn.uviewui.com/uview/album/1.jpg"
						},
						{
							name: "333",
							url: "https://cdn.uviewui.com/uview/album/1.jpg"
						},

					],


				],
			}

奥拓蛋/
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
仿微信朋友圈图片展示效果
03-14
插件描述：仿微信朋友圈图片展示效果。 参考实例：http://www.jq22.com/jquery-info6186
uview IndexList 索引列表 小程序点击右侧字母 错乱
wangyicsd的博客
07-09 953
uview IndexList 索引列表 小程序点击右侧字母 错乱
Vue2搜索框实现indexedList索引列表-锚点跳转，附带数据动态绑定、多选、单选、搜索功能
最新发布
shuai1999m的博客
07-02 326
简述：如何在pc端实现像手机移动端才有的indexLIst索引列表呢，查阅很多组件库，都没能找到相应组件，那只能自己来手搓了。这里代码中都有注释，样式，js一并贴入，看不懂那我也没办法了，强调一点，其中字母索引，和children是必须的！这里vue版本vue2.0，QQ录屏20240702160508。深拷贝方法，网上自行百度找吧。
uview IndexList 索引列表 数据处理方案
luo_luo_yao的博客
03-27 1031
uview是不会主动帮你处理数据的，itemArr里的数需要自己从A-Z排序。而后台返回的好友数据也是直接一个数组，这个时候就需要我们自己处理数据了。直接拿userName这个字段返回的中文名称进行匹配。获取它们的首字母拼音之后按照顺序放入不同的数组中。看到uview有现成的就直接拿过来使用了。展示代码直接从uview官网cv过来，简单快捷。然后创建一个能直接获取到indexList数据的js文件vue-py.js。1.创建一个编写汉字和编码文件对应的js文件；我们在代码中调用的时候只需要简单调用就行了。
uView1.0 indexList索引列表遇到的坑
haosicx的博客
09-18 7026
在使用uView索引列表做通讯录的时候遇到了几个问题 右侧的abcd首字母按钮点击错乱 比如点了f 弹出显示的是a 通过排查 发现传入这个右侧组件参数的时候 后端并没有返回完整的A-Z 而是有A首字母的数据 才返回了A 没有F首字母的 就没有返回F 导致A-Z不完整 所以传进入后显示就出问题了 所以不管数据有没有都要想办法把A-Z匹配完整才行 点击右侧的按钮 不会锚点跳转 比如点击Z 要跳转到Z的首字母那里去 后来发现uView只提供了点击右侧按钮的回调方法 (可以拿到
u-view使用记录-IndexList 索引列表
H763857881的博客
08-18 6370
u-view IndexList 索引列表问题使用记录 最近项目中使用了自定义导航栏，然后uview的索引列表的使用出了点问题，记录下自己的解决方法 根据文档加了offset-top属性后，ABC这行分隔的是移动到了需要的位置，内部的数据还是移动到了top为0的地方 方法 找到uview-ui里的u-index-list文件，注释这段代码，这部分的移动，并没有计算传进来的offset-top属性，可能之后的版本会修复吧 给右侧索引加个id 点击时，移动整个列表，圈中部分是头部和列表上面其他元素的高度
vue+web端仿微信网页版聊天室功能
11-28
以上是基于给定的项目描述和技术栈分析出的主要知识点，它们共同构建了一个功能完善的仿微信Web端聊天室。通过这些技术的结合，开发者能够创建出具有类似微信聊天功能的网页应用，包括消息发送、表情、图片和视频...
基于vue+nodejs的仿微信风格的在线聊天室源码(毕业设计).zip
07-05
基于vue+nodejs的仿微信风格的在线聊天室源码(毕业设计).zip 该项目是个人毕设项目源码，评审分达到95分，都经过严格调试，确保可以运行！放心下载使用。 该项目资源主要针对计算机、自动化等相关专业的学生或从业者...
uni-app+Vue3+pinia+uview-plus搭建的项目包
12-28
uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-...
基于SpringBoot+Websocket+Vue的仿微信即时通讯系统源码+数据库sql(课程大作业).zip
12-17
基于SpringBoot+Websocket+Vue的仿微信即时通讯系统源码+数据库sql(课程大作业).zip基于SpringBoot+Websocket+Vue的仿微信即时通讯系统源码+数据库sql(课程大作业).zip基于SpringBoot+Websocket+Vue的仿微信即时通讯...
vue实现indexlist 组件
yuange
02-22 1682
<template> <div> <scroll class="scroll" :data='singerList' :pullUpLoad=true @pullUpLoad='pullUpLoad' :pullDownRefresh={s...
关于 uview 的indexList跳转不到位的问题：添加方法@select=“clickSelect“
weixin_63515766的博客
01-12 1572
关于 uview 的indexList跳转不到位的问题
uni-app [全端兼容] - 详细实现城市选择索引列表（通过 A-Z 排序的城市列表），全国城市列表选择右侧a-z字母排序功能，城市自动按首字母分类（详细示例源代码，一键复制运行即可）
王佳斌
08-10 6184
uniapp，全国市区列表选择，a-z字母排序城市列表，uniapp 仿美团饿了么城市列表+顶部搜索，中国34个省市按字母排序 uniapp城市列表，uniapp根据区域的首字母进行排序分类并可在右侧进行点击跳转，uni-app选择城市（城市列表选择），uni-app城市选择索引列表（A - Z），英文字母索引全国城市uni-app做A-Z排序城市列表、索引列表，uniapp选择所有城市通过索引方式，英文字母索引全国城市数据，Vue uniapp省份城市列表选择、省市选择，uniapp定位城市索引列表，uv
【uview的indexList索引列表的数据】
qq_42568750的博客
12-09 2008
本播主今天上午的项目需要全中国的城市数据，找后端要 丢给我一个省市区三级联动的js文件然后经过一系列的操作 生成了适用于uview的indexlist的数据：自取（下载数据）
uview-ui_components_u-index-list_u-index-list.vue
qq_37707731的博客
01-15 2059
<template> <!-- 支付宝小程序使用$u.getRect()获取组件的根元素尺寸，所以在外面套一个"壳" --> <view> <view class="u-index-bar"> <slot /> <view v-if="showSidebar" class="u-index-bar__sidebar" @touchstart.stop.p...
uview框架 u-index-list 组件高度自定义调整
qq_29714999的博客
11-11 1187
使用uview框架2.0版本中的u-index-list组件高度自定义调整
uview indexList 按字母跳转不了
LlanyW的专栏
09-08 1195
点击字母跳转不到位的问题：在添加方法@select=“clickSelect“锚点要加id，用对应的字母做为id值，
Vue实现聊天框实时展示新消息
绿叶的博客
12-01 2109
实现和微信QQ聊天相同的功能，打开聊天框或收到新消息，都能实时展示新消息
vue+element UI 仿微信at联系人
11-22
为了实现Vue+Element UI仿微信at联系人的功能，可以按照以下步骤进行： 1. 首先安装Vue和Element UI，可以使用npm进行安装。 2. 在Vue中使用Element UI的组件，可以在需要使用的组件中引入，例如： ```javascript import { Input, Autocomplete } from 'element-ui'; export default { components: { 'el-input': Input, 'el-autocomplete': Autocomplete } } ``` 3. 在页面中使用Autocomplete组件实现at联系人的功能，例如： ```html <el-autocomplete v-model="inputValue" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect"> <template slot-scope="{ item }"> <div class="name">{{ item.value }}</div> </template> </el-autocomplete> ``` 在data中定义inputValue，querySearchAsync方法用于异步获取联系人列表，handleSelect方法用于选择联系人后的回调。 4. 根据微信的UI样式，可以自定义Element UI的样式，例如： ```css .el-autocomplete .el-input__inner { padding-left: 30px; } .el-autocomplete .el-input__suffix { font-size: 16px; color: #999; left: 10px; } .el-autocomplete .el-autocomplete-suggestion__list { margin-top: 0; border-radius: 0; box-shadow: none; border: 1px solid #dcdfe6; } .el-autocomplete .el-autocomplete-suggestion__item { padding: 10px 20px; font-size: 14px; color: #333; } .el-autocomplete .el-autocomplete-suggestion__item:hover { background-color: #f5f7fa; } ``` 5. 最后，根据微信的UI布局，可以使用Element UI的Tabs组件实现左侧联系人列表和右侧消息窗口的切换，例如： ```html <el-tabs v-model="activeTab"> <el-tab-pane label="联系人列表" name="contact-list"> <!-- 联系人列表 --> </el-tab-pane> <el-tab-pane label="消息窗口" name="message-window"> <!-- 消息窗口 --> </el-tab-pane> </el-tabs> ``` 在data中定义activeTab，用于控制Tabs的切换。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值