vue如何移動(dòng)到指定位置(scrollIntoView)親測(cè)避坑
vue移動(dòng)到指定位置(scrollIntoView)
用(scrollIntoView)來(lái)實(shí)現(xiàn)移動(dòng)到指定位置建議不要放在(mt-loadmore)里使用,不然頭部會(huì)被擠上去----親測(cè)
- html
<div id="pronbit" ref="pronbit">需要移動(dòng)到的位置</div>
- js
//選中id
document.getElementById(e).scrollIntoView({
behavior: "smooth", // 平滑過(guò)渡
block: "start" // 上邊框與視窗頂部平齊。默認(rèn)值
});
// 選中ref
this.$refs.pronbit.scrollIntoView({
behavior: "smooth", // 平滑過(guò)渡
block: "start" // 上邊框與視窗頂部平齊。默認(rèn)值
});
//要是放在mounted()里執(zhí)行使用
this.$refs.pronbit.scrollIntoView();//不然只執(zhí)行一次刷新了也一樣
//禁止scrollIntoView
this.$refs.pronbit.scrollIntoView(false);上面介紹使用方法 下面請(qǐng)看效果圖

<template>
<div id="app">
<!-- 輪播 -->
<div class="planting">
<cube-slide ref="slide" :data="items" @change="changePage">
<cube-slide-item v-for="(item, index) in items" :key="index" @click.native="clickHandler(item, index)">
<img @click="imgus('aa'+index)" :src="item.image">
</cube-slide-item>
</cube-slide>
</div>
<!-- 輪播 -->
<img style="width: 100%;float: left;" v-for="(item,index) in items" :id="'aa'+index" :src="item.image">
<img style="width: 100%;float: left;" v-for="(item,index) in 3" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1076778629,484203681&fm=11&gp=0.jpg">
</div>
</template>
<script>
import { getHomeData } from "@/api/public";
import dialog from "@/utils/dialog";//彈窗
export default {
props: {
msg: String
},
data() {
return {
items: [
{
url: '',
image: 'http://img3.imgtn.bdimg.com/it/u=1960330002,2943700579&fm=26&gp=0.jpg'
},
{
url: '',
image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=225193914,751284870&fm=26&gp=0.jpg'
},
{
url: '',
image: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3019995954,636527762&fm=26&gp=0.jpg'
}
],
}
},
mounted(){
},
methods: {
//滾動(dòng)指定位置
imgus:function(e){
document.getElementById(e).scrollIntoView({
behavior: "smooth", // 平滑過(guò)渡
block: "start" // 上邊框與視窗頂部平齊。默認(rèn)值
});
},
// 輪播
changePage(current) {
console.log('當(dāng)前輪播圖序號(hào)為:' + current)
},
clickHandler(item, index) {
console.log(item, index)
},
},
}
</script>
<style>
.cube-slide-item img{
width: 100%;
height: 100%;
}
.planting{
width: 100%;
height: 6rem;
overflow: hidden;
}
.cube-slide-dots{
position:absolute;
bottom: 0.3rem;
}
.cube-slide-dots>span{
height: 2px;
}
</style>引入了滴滴組件的可以直接使用(建議參考)
scrollIntoView導(dǎo)致元素偏移問(wèn)題
element.scrollIntoView()
需要默認(rèn)為true element.scrollIntoView()等同于element.scrollIntoView(true)
| (默認(rèn)值) | 描述 |
|---|---|
| true | 元素的頂部將對(duì)齊到可滾動(dòng)祖先的可見(jiàn)區(qū)域的頂部 |
| false | 元素的底部將與可滾動(dòng)祖先的可見(jiàn)區(qū)域的底部對(duì)齊。 |
但是
scrollIntoView當(dāng)元素超出可視區(qū)域的時(shí)候就會(huì)出現(xiàn)元素偏移的情況
解決辦法有兩個(gè)
1.修改元素
`height:100%;overflow:auto`
2.
var Id= document.getElementById("###(##代表id)");
Id.parentNode.scrollTop = Id.offsetTop;這樣會(huì)默認(rèn)跑到頂端但是會(huì)出現(xiàn)一個(gè)問(wèn)題使得元素的一半出不來(lái)
3.最好
var Id= document.getElementById("###(##代表id)");
Id.parentNode.scrollTop = Id.offsetTop- Id.offsetHeight;總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3中如何修改父組件傳遞到子組件中的值(全網(wǎng)少有!)
大家都知道,vue是具有單向數(shù)據(jù)流的傳遞特性,下面這篇文章主要給大家介紹了關(guān)于Vue3中如何修改父組件傳遞到子組件中值的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
在vue項(xiàng)目創(chuàng)建的后初始化首次使用stylus安裝方法分享
下面小編就為大家分享一篇在vue項(xiàng)目創(chuàng)建的后初始化首次使用stylus安裝方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
Vue加載組件、動(dòng)態(tài)加載組件的幾種方式
組件是Vue.js最強(qiáng)大的功能之一。組件可以擴(kuò)展HTML元素,封裝可重用的代碼。這篇文章通過(guò)實(shí)例代碼給大家介紹了Vue加載組件、動(dòng)態(tài)加載組件的幾種方式,需要的朋友參考下吧2018-08-08
淺談vue中computed屬性對(duì)data屬性賦值為undefined的原因
本文主要介紹了淺談vue中computed屬性對(duì)data屬性賦值為undefined的原因,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02
vue實(shí)現(xiàn)高德地圖添加多個(gè)點(diǎn)標(biāo)記
地圖多點(diǎn)標(biāo)注其實(shí)是個(gè)非常簡(jiǎn)單的問(wèn)題,這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)高德地圖添加多個(gè)點(diǎn)標(biāo)記的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
vue項(xiàng)目中實(shí)現(xiàn)圖片預(yù)覽的公用組件功能
小編接到查看影像的功能需求,根據(jù)需求,多個(gè)組件需要用到查看影像的功能,所以考慮做一個(gè)公用組件,通過(guò)組件傳值的方法將查看影像文件的入?yún)鬟^(guò)去。下面小編通過(guò)實(shí)例代碼給大家分享vue項(xiàng)目中實(shí)現(xiàn)圖片預(yù)覽的公用組件功能,需要的朋友參考下吧2018-10-10
vue項(xiàng)目中使用Hbuilder打包app 設(shè)置沉浸式狀態(tài)欄的方法
這篇文章主要介紹了vue項(xiàng)目 使用Hbuilder打包app 設(shè)置沉浸式狀態(tài)欄的方法,本文通過(guò)實(shí)例代碼效果圖展示給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-10-10

