uni-app实现联系人右侧索引字母表点击滚动到相应的位置(uni.pageScrollTo(OBJECT))

长话短说，直接用uni-app提供的接口：uni.pageScrollTo(OBJECT)，具体过程详细思路如下：

要实现点击字母滚动到相应的联系人

看到这个需求后的整个思路过程：

一、首先要跟后端沟通传过来的数据结构需要如下：

/*friendsLists的数据格式:[
[],[],.....[] //一共27个数组，分别存不同字母开头的名字
]*/
friendsLists: [ //27个子数组[//以字母A开头名字的朋友{name: "阿刁",uid:2154545,avatarUrl:"/static/img/avatar.png",},{name: "奥利给",uid:2154546,avatarUrl:"/static/img/avatar.png",}][//以字母B开头的].....[//以符号开头的名字用#号索引{name: "^_^哈哈哈",uid:4545121,avatarUrl:"/static/img/avatar.png",}]
],

这个判断名字第一个字属于哪个字母段的工作需要后端来做，因为这个过程需要转码然后根据字符处于编码表的位置进行分类，比较复杂，后端有方法可以直接转码，前端貌似需要调用别人写的js文件，比较复杂。

二、得到了这个格式的数组之后前端显示就非常简单，v-for循环出来就可以

三、核心功能来了，怎么实现点击可以滚动到相应的分区呢？

1、我首先想到了a标签的href：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>JS Bin</title>
</head>
<body><div class="blue"><div id="hihihi">hihihi</div></div>
<div class="red"><a href="#hihihi">hihihih</a></div>
</body>
</html>

给需要跳转的位置的元素加一个id，然后给a标签的href设成 #+id 就可以页面内跳到该元素的位置，但是这种方法只能在浏览器上生效，在手机上会报错，没办法，换思路

2、黔驴技穷的情况下不得不使用DOM了(虽然Vue不推荐使用)

document.getElementById(item).scrollIntoView();，同样是给要跳转到的地方设一个id，然后用这个方法，最后发现，这种方法同样也只能在浏览器上生效，崩溃。。。

四、最后才发现原来uni-app已经提供了一个API(呜呜呜~为什么不早一点发现，多走这么多弯路)

uni.pageScrollTo({scrollTop: 0,duration: 300
});

scrollTop是离顶部的距离，duration是动画的时间

首先request请求拿到联系人列表的时候就计算出每个分区离顶部的距离，存到一个数组中，点击的时候直接拿出来用就可以了

uni.request({    url:
"https://www.fastmock.site/mock/40e98c8f8497050b8b1c445c03db67b0/test/api/sortFriendsList",method: 'GET',data: {},success: (res) => {//获取朋友列表this.friendsLists = res.data.friendsLists//计算每个索引单位离顶部距离let distanceList = []distanceList.push(120) //A距离顶部距离120px//从B开始计算顶部距离for(let i = 0; i < this.friendsLists.length; i++){let distance = distanceList[i] + this.friendsLists[i].length * 60;distanceList.push(distance);}console.log(distanceList);this.distanceList = distanceList;},fail: (err) => {},complete: () => {}
})

具体的计算方法就要看你组件具体的高度

A分区的顶部距离就是120px，不需要计算直接存进去，从B分区开始计算，B分区里顶部的距离就是A分区的长度加上A分区离顶部距离： = 120 + A.length✖60 （每个联系人占高60px，A数组有多长就有多少个联系人）

C的距离 = B + B.length✖60

余下的类推

uni-app实现联系人右侧索引字母表点击滚动到相应的位置(uni.pageScrollTo(OBJECT))相关推荐

uni app 自动化索引列表
uni app 自动化索引列表,官方推荐的第三方插件 https://ext.dcloud.net.cn/plugin?id=375 [{"letter": "A&quo ...
【Android 仿微信通讯录导航分组列表-下】自定义View为RecyclerView打造右侧索引导航栏IndexBar
本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布转载请标明出处: http://blog.csdn.net/zxt0601/article/details/52420706 本文出 ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
HBuilder X ——Uni app 学习笔记（一）
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...
uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...
iOS tableView 右侧索引视图状态获取
需求一图胜千言! 在触摸右侧索引栏时需要展示对应的组号名称手指离开时消失实现通过Xcode查看视图层次结构右侧索引视图的继承关系是这样的: UITableViewIndex UICont ...

uni-app实现联系人右侧索引字母表点击滚动到相应的位置(uni.pageScrollTo(OBJECT))

长话短说，直接用uni-app提供的接口：uni.pageScrollTo(OBJECT)，具体过程详细思路如下：

uni-app实现联系人右侧索引字母表点击滚动到相应的位置(uni.pageScrollTo(OBJECT))相关推荐

最新文章

热门文章