vue、uniapp实现锚点定位

1.vue 点击页面定位到指定位置锚点跳转方法

html部分：

<template><div class="home"><div class="head" :style="{height:liHeight+'px'}" style="background:#e2c08d; transition: height 0.3s;"><li v-for="(item,index) in arr" v-show="index<liIndex" @click="liChange(index)">{{item}}</li></div><div id="li0" style="height:500px; background:pink;">我是第一个盒子</div><div id="li1" style="height:500px; background:skyblue;">我是第二个盒子</div><div id="li2" style="height:500px; background:#57643b;">我是第三个盒子</div><div id="li3" style="height:500px; background:#caa062;">我是第四个盒子</div><div id="li4" style="height:500px; background:#cb1c2d;">我是第五个盒子</div></div>
</template>

js部分：

<script>
export default {data() {return {arr:['跳到第一个盒子','跳到第二个盒子','跳到第三个盒子','跳到第四个盒子','跳到第五个盒子'],flag:false,liHeight:30,liIndex:1,}},methods: {//瞄点定位事件liChange(i){this.$nextTick(function(){ if(i==0&&this.flag==false){  this.flag=true;this.liHeight=150;this.liIndex=10}else if(i==0){this.flag=false,this.liIndex=1;this.liHeight=30}else{ //瞄点定位document.querySelector('#li'+i).scrollIntoView({behavior: "smooth",//其中behavior表示为过渡方式，值有auto和smooth两种，auto表示立即定位到目标元素，smooth表示平滑移动到目标元素，默认为autoblock: "start",   //block表示目标元素出现在屏幕的位置，值有end，center，start三种。inline: "nearest"}); }})}}
}
</script>

此处的$nextTick方法意思是在下次DOM更新循环结束之后执行延迟回调。

锚点定位的主要用到 document.querySelector( '#id名/.类名 ' ).scrollIntoView(true) 方法。

2.uniapp实现锚点定位

在这里我就不上html的代码了，直接上逻辑，你们直接拿走使用就可以实现啦

uni.createSelectorQuery().select('#li'+i).boundingClientRect(data=>{//目标位置的节点：类class或者id
uni.createSelectorQuery().select(".home").boundingClientRect(res=>{//最外层盒子的节点：类class或者id
uni.pageScrollTo({
duration: 1000,  //过渡时间
scrollTop:data.top-50 - res.top,//到达距离顶部的top值 根据自己情况可调//scrollTop:data.top - res.top,//如果置顶})}).exec()
}).exec();

vue、uniapp实现锚点定位相关推荐

vue中实现锚点定位
vue中实现锚点定位通过监听滚动事件,高亮显示锚点按钮添加点击事件,根据锚点滚动至对应区域并实现平滑滚动这里主要是实现了一个简单的滚动触发锚点高亮,以及点击锚点触发滚动的功能如果是获取浏览器的 ...
vue页面实现锚点定位
html代码: <div @scroll="scrollEvent">/****目录部分***/<ul class="titless"> ...
uni-app实现锚点定位功能
效果图功能实现使用uni-app自带scroll-view组件利用scroll-into-view属性来自定滚动到的子元素的id,从而实现锚点功能.需要注意的地方有scroll-view需要指定高 ...
vue中实现锚点定位以及平滑滚动到指定位置
这里主要是实现了一个简单的滚动触发锚点高亮,以及点击锚点触发滚动的功能如果是获取浏览器的滚动高度,各个浏览器有所差异,使用以下几种方式: Chrome: document.body.scrollTo ...
vue中实现锚点定位平滑滚动
下面是简单的代码,拿来即用 html//给div盒子设定单击事件和ref名 <div @click="getThere" ref="cat_box"> ...
vue锚点定位（代码通用） - 总结篇
vue锚点定位(应用场景) 当前页面锚点跨页面锚点 hash模式下的锚点 history模式下的锚点应用前提:(重要的事情,说3+1遍) 任意场景.任意代码.任意框架都能对接! 都能采用! 都能 ...
Vue中如何正常使用锚点定位？
问题: 项目中会有一些功能需要用到锚点定位,比如文章目录.点击标题跳转到正文内容等等.但vue的路由设置默认为hash模式,正常使用a标签的锚点定位,在浏览器刷新/后退/前进时,路由会匹配不上,导致页 ...
uniapp锚点定位
uniapp 锚点定位需求:在 uniapp 写 App 时,根据后端接口返回的数据渲染图文,并且要对图片进行锚点定位. 前提:后端要给每张图片一个单独的参数,用来区分每张图片. 思路:前端将这个特 ...
vue中使用scrollTo实现锚点定位
vue利用window.scrollTo快速实现锚点定位页面部分 <div id="app"><ul class="menus">&l ...

vue、uniapp实现锚点定位

1.vue 点击页面定位到指定位置锚点跳转方法

2.uniapp实现锚点定位

vue、uniapp实现锚点定位相关推荐

最新文章

热门文章

vue、uniapp实现锚点定位

1.vue 点击页面定位到指定位置 锚点跳转方法

2.uniapp实现锚点定位

vue、uniapp实现锚点定位相关推荐

最新文章

热门文章

1.vue 点击页面定位到指定位置锚点跳转方法