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

ゞ浴缸里的玫瑰 2023-06-23 13:00 15阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pbmlfMTI1MTg2MTIwOQ_size_16_color_FFFFFF_t_70][]

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

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

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

/*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.pageScrollTo_OBJECT]: https://uniapp.dcloud.io/api/ui/scroll?id=pagescrollto
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pbmlfMTI1MTg2MTIwOQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191219105155516.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pbmlfMTI1MTg2MTIwOQ==,size_16,color_FFFFFF,t_70