uni-app 锚点跳转

妖狐艹你老母 2022-10-18 14:56 279阅读 0赞

# 效果图 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTIzMDI1MA_size_16_color_FFFFFF_t_70]

# 实现原理 #

通过 uni.createSelectorQuery 获取dom节点距离顶部的距离 再通过uni.pageScrollTo 滑动页面

# HTML #

//NAV部分
    <view class="" v-for="(item,index) in 数组" :key="index" @click="point(index)">
    	<text>{ { item.name}}</text>
    </view>
    // 内容部分
    <view class="newShopCon">
    	<view :class=" 'tab_item'+index " v-for="(item,index) in 数组" :key="index" >
    		<view>这里是内容</view>
    	</view>
    </view>

# JS #

methods：{ 
    	point(index){ 	//锚点滑动 
    		//要跳转的目标位置的节点
    		uni.createSelectorQuery().select(".tab_item" + index).boundingClientRect(data=>{  
    			//最外层盒子的节点
    			uni.createSelectorQuery().select(".newShopCon").boundingClientRect(res=>{   
    				uni.pageScrollTo({ 
    					duration: 100,//过渡时间
    					scrollTop:data.top - res.top  ,//到达距离顶部的top值
    				})
    			}).exec()
    		}).exec();
    	},
    	//如果想要获得实时滑动的位置 根据滑动位置改变NAV当前选中高亮
    	onPageScroll(e) { 
    		//e.scrollTop 是当前页面滑动距离
    	},
    	
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTIzMDI1MA_size_16_color_FFFFFF_t_70]: /images/20221005/d88cfe8903e2485a8e32e18346dc4ee7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，279人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML跳转锚点的使用方式

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQz

男娘i/ 2023年01月08日 11:29/ 0 赞/ 230 阅读

相关 uni-app 实现锚点跳转方法

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhp

快来打我*/ 2022年12月07日 15:21/ 0 赞/ 675 阅读

相关 js 模拟锚点跳转

使用scrollIntoView // 找到锚点 let anchorElement = document.getElementById(anchorNa

忘是亡心i/ 2022年12月01日 05:17/ 0 赞/ 186 阅读

相关学习笔记——跳转锚点

> 有时，点击选项卡或者边栏时，不跳转页面，而是滚动到某一标签特定的位置。这是我们需要用到跳转锚点这一功能。 -------------------- 一。方法一：

待我称王封你为后i/ 2022年11月09日 14:21/ 0 赞/ 224 阅读

相关 CSDN锚点跳转

学习锚点跳转跳转到footer处的锚点链接，点击即会跳转第一步 [跳转到footer处的锚点链接，点击即会跳转](footer) 第

谁借莪１个温暖的怀抱￠/ 2022年10月26日 14:26/ 0 赞/ 218 阅读

相关 uni-app 锚点跳转

效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

妖狐艹你老母/ 2022年10月18日 14:56/ 0 赞/ 280 阅读

相关 js跳转到锚点

1，在页面添加location.hash可实现无论哪个页面跳到该页面都跳到固定位置。 <script language="[JavaScript][]">

雨点打透心脏的1/2处/ 2022年07月16日 11:12/ 0 赞/ 298 阅读

相关 gitbook maekdown页面间锚点跳转

作者：LoveEmperor-王子様在目标页面添加锚点,例： > 在HTML里添加唯一id ![在这里插入图片描述][watermark_type_ZmFuZ3p

喜欢ヅ旅行/ 2022年04月17日 05:41/ 0 赞/ 407 阅读

相关锚点跳转

html锚点(mao dian)--特殊的超链接锚点(anchor)：其实就是超链接的一种，一种特殊的超链接普通的超链接，<a href="路径"></a> 是跳

忘是亡心i/ 2022年01月19日 03:49/ 0 赞/ 375 阅读

相关 vue跨页面锚点跳转

> 从theindex.vue跳转到investment.vue,`红色部分就是写入的地方` > theindex.vue ![在这里插入图片描述][watermark_t

偏执的太偏执、/ 2021年12月10日 07:39/ 0 赞/ 540 阅读