页面初始化后,需要滚动到某个元素的位置,但是该元素尚未渲染完成。

vue方式

 <template>
	<div class="doc">
		
		<div class="fixed" v-show="loading">页面仍在渲染中,请稍后div>
		<div class="green" v-show="!loading">√目标元素渲染完成,进行滚动div>
		<div class="list_div" v-for="item in 10" :key="item">
			<p>{{ item.toString().padStart(5, "0") }}:{{ set_title() }}p>
		div>
		
		<div
			v-for="(item, index) in list"
			:key="index + '_'"
			class="list_div title"
			:data-index="index"
		>
			模拟的渲染极慢的元素,index==={{ index }}
		div>
	div>
template>

<script>
	export default {
		components: {},
		data() {
			return {
				list: [],
				loading: true,
			};
		},
		computed: {},
		watch: {},
		created() {
			//需要跳转的位置----------------------------------------------------!!
			const index = 3;
			//定时器间隔
			const time = 1000;
			if (index) {
				let interval = setInterval(() => {
					this.search(index) && (clearInterval(interval), (this.loading = false));
				}, time);
			}
		},
		mounted() {
			//模拟的渲染慢的数据
			setTimeout(() => {
				this.list = [1, 2, 3, 4];
			}, 1500);
		},
		methods: {
			set_title() {
				//最上方渲染极快的数据
				const list = ["哎呀", "你好", "搞什么啊", "我服了", "真的强"];
				return (
					list[this.random(0, 4)] +
					list[this.random(0, 4)] +
					list[this.random(0, 4)] +
					list[this.random(0, 4)]
				);
			},
			random(n, m) {
				return parseInt(Math.random() * (m - n) + n);
			},
			search(number) {
				const div = document.querySelectorAll(".title");
				if (div.length == 0) {
					return;
				}
				const list = [].slice.call(div);
				try {
					return list.map((item) => {
						if (item.dataset.index == number) {
							const rect = item.getBoundingClientRect();
							//元素滚动
							item.scrollIntoView({ behavior: "smooth" });
							console.log(
								"找到了_:",
								"rect_top",
								rect.top,
								"rect_left",
								rect.left
							);
							return true;
						}
					}).length;
				} catch (error) {
					console.log("err", error);
					return false;
				}
			},
		},
	};
script>
<style lang='scss' scoped>
	.list_div {
		height: 300px;
		width: 400px;
		border: 1px solid;
	}

	.fixed {
		position: fixed;
		top: 40px;
		right: 40px;
		background-color: #000;
		color: #fff;
		padding: 5px 15px;
	}
	.green {
		position: fixed;
		top: 40px;
		right: 40px;
		padding: 5px 15px;
		background-color: green;
		color: #fff;
	}
style>

你可能感兴趣的:(vue.js,javascript,前端)