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

最新推荐文章于 2024-09-07 18:20:30 发布

mini_qiu

最新推荐文章于 2024-09-07 18:20:30 发布

阅读量5.2k

点赞数 1

分类专栏： uni-app 文章标签： uni.pageScrollTo 联系人字母索引

本文链接：https://blog.csdn.net/mini_1251861209/article/details/103610655

版权

uni-app 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

长话短说，直接用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

余下的类推