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

长话短说，直接用uni-app提供的接口：uni.pageScrollTo(OBJECT)，具体过程详细思路如下：要实现点击字母滚动到相应的联系人看到这个需求后的整个思路过程：一、首先要跟后端沟通传过来的数据结构需要如下：/*friendsLists的数据格式:[[],[],.....[] //一共27个数组，分别存不同字母开头的名字]*/friendsLists: [...

mini_qiu

5021人浏览 · 2019-12-19 11:34:22

mini_qiu · 2019-12-19 11:34:22 发布

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

余下的类推

华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐