uni-app 实现锚点跳转方法

快来打我* 2022-12-07 15:21 691阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI4NTI1MA_size_16_color_FFFFFF_t_70][]

将uniapp的uni.createSelectorQuery()方法与uni.pageScrollTo(OBJECT)方法结合使用

更详细用法见官方文档：  
uni.createSelectorQuery()方法： [https://uniapp.dcloud.io/api/ui/nodes-info?id=createselectorquery][https_uniapp.dcloud.io_api_ui_nodes-info_id_createselectorquery]  
uni.pageScrollTo(OBJECT)方法： [https://uniapp.dcloud.io/api/ui/scroll?id=pagescrollto][https_uniapp.dcloud.io_api_ui_scroll_id_pagescrollto]

核心代码：

//从当前位置到达目标位置
    uni.createSelectorQuery().select('.comment-content').boundingClientRect(data => { //目标位置的节点：类或者id
    	uni.createSelectorQuery().select(".arc-content").boundingClientRect(res => { //最外层盒子的节点：类或者id
    		uni.pageScrollTo({
    			duration: 100, //过渡时间
    			scrollTop: data.top - res.top, //到达距离顶部的top值
    		})
    	}).exec()
    }).exec();

示例： （上面的滚动条是uview插件）

<template>
    	<view>
    		<view class="arc-content">
    
    			<u-tabs :list="list" :is-scroll="true" bar-width="120" active-color="#ff5959" :current="current" @change="change"></u-tabs>
    
    			<view class="" style="height: 100upx;"></view>
    
    			<view class="comment-content" style="margin-top:16upx;background: #fff;" v-for="(item,index) in list" :key="index" @click="tapwhole">
    				<view class="titles" :class="item.eg">{
       {item.name}}</view>
    				<view class="conts">
    					<view class="contitem" v-for="(its,indexs) in list">
    						<image src="../../static/homepage_icon_service_selected@2x.png"></image>
    						<text>{
       {its.name}}</text>
    					</view>
    				</view>
    			</view>
    		</view>
    	</view>
    </template>
    
    <script>
    export default {
    	data() {
    		return {
    			list: [
    				{
    					name: '拓展管理',
    					eg:'a'
    				},
    				{
    					name: '仓库管理',
    					eg:'b'
    				},
    				{
    					name: '财务管理',
    					eg:'c'
    				},
    				{
    					name: '精准营销',
    					eg:'d'
    				},
    				{
    					name: '报表查询',
    					eg:'e'
    				},
    				{
    					name: '车型查询',
    					eg:'f'
    				},
    				{
    					name: '覆盖分布',
    					eg:'g'
    				},
    				{
    					name: '仓库智能模块',
    					eg:'h'
    				},
    				{
    					name: '服务反馈',
    					eg:'i'
    				}
    			],
    			current: 0,
    		};
    	},
    	methods: {
    		change(index) {
    			console.log(this.list[index].name)
    			this.current = index;
    				//从评论区域回到顶部
    				uni.createSelectorQuery().select("."+this.list[index].eg).boundingClientRect(data=>{//目标位置的节点：类或者id
    							uni.createSelectorQuery().select(".arc-content").boundingClientRect(res=>{//最外层盒子的节点：类或者id
    										uni.pageScrollTo({
    													duration: 100,//过渡时间
    													scrollTop:data.top - res.top-80  ,//到达距离顶部的top值
    										})
    							}).exec()
    				}).exec();
    		},
    		tapwhole:function(){
    			uni.navigateTo({
    				url:'whole/whole'
    			})
    		}
    	}
    };
    </script>
    
    <style lang="scss">
    	page{
    		background: #F3F3F3;
    	}
    	.u-tabs{
    		position: fixed;
    		top: 0;
    		left: 0;
    		z-index: 999;
    	}
    	.titles {
    		font-size: 36upx;
    		height: 80upx;
    		width: 100%;
    		line-height: 80upx;
    		padding-left: 24upx;
    		font-weight: 500;
    	}
    	
    	.conts {
    		width: 100%;
    		display: flex;
    		flex-wrap: wrap;
    		padding-bottom: 32upx;
    	}
    	
    	.contitem {
    		width: 25%;
    		display: flex;
    		flex-direction: column;
    		align-items: center;
    		margin-top: 32upx;
    	}
    	
    	.contitem image,
    	.offeritem image {
    		width: 48upx;
    		height: 48upx;
    	}
    	
    	.myoffer {
    		margin-top: 16upx;
    		background: #fff;
    	}
    	
    	.offer {
    		width: 100%;
    		height: 160upx;
    		display: flex;
    		justify-content: space-around;
    	}
    	
    	.offeritem {
    		display: flex;
    		flex-direction: column;
    		align-items: center;
    		margin-top: 32upx;
    	}
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI4NTI1MA_size_16_color_FFFFFF_t_70]: /images/20221123/6124bfcc6238495e9340092d9cd7ce53.png
[https_uniapp.dcloud.io_api_ui_nodes-info_id_createselectorquery]: https://uniapp.dcloud.io/api/ui/nodes-info?id=createselectorquery
[https_uniapp.dcloud.io_api_ui_scroll_id_pagescrollto]: https://uniapp.dcloud.io/api/ui/scroll?id=pagescrollto