代码做了兼容处理,安卓获取不到,苹果的就可以
document.documentElement.scrollTop ||
window.pageYOffset ||
document.body.scrollTop;
<template>
<div class="sui-content">
<div class="sui-content-title">
<div class="sui-content-item" v-for="item in modelList" :id="item.mid">
<el-card class="sui-content-card">
<img
:src="baseUrl + item.mid + '.jpg'"
class="sui-content-image"
@click="handleClick(item.mid)"
/>
<div style="padding: 10px; text-align: center">
<span>{{ item.mid }}</span>
</div>
</el-card>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref, onActivated, nextTick } from "vue";
import { ElMessage } from "element-plus";
import { reqModelList } from "@/api/model";
import useModelState from "@/store/modules/model";
import { useRouter } from "vue-router";
const router = useRouter();
const modelState = useModelState();
let modelList = ref<any>([]);
let baseUrl = ref("");
let scrollPosition = ref<number>(0);
onMounted(() => {
console.log("onMounted");
getModelList();
window.addEventListener("scroll", scrollTop, true);
});
const scrollTop = () => {
scrollPosition.value =
document.documentElement.scrollTop ||
window.pageYOffset ||
document.body.scrollTop;
};
onActivated(() => {
console.log("onActivated");
let position = sessionStorage.getItem("scrollTop");
if (position > 0) {
document.documentElement.scrollTop = position;
document.body.scrollTop = position;
window.pageYOffset = position;
}
});
const getModelList = async () => {
let result: any = await reqModelList();
if (result.data.statusCode == 200) {
modelList.value = result.data.body.data;
}
};
const handleClick = (mid: any) => {
router.push(`/model/${mid}`);
sessionStorage.setItem("scrollTop", scrollPosition.value);
};
</script>
<style scoped lang="scss">
.sui-content {
width: 90%;
height: 100%;
margin: 0 auto;
padding: 0 auto;
.sui-content-title {
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
.sui-content-item {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
@media screen and (max-width: 1280px) {
-ms-flex: 0 0 33%;
flex: 0 0 33.33%;
max-width: 33.33%;
}
@media screen and (max-width: 768px) {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.sui-content-card {
margin: 5px;
}
.sui-content-image {
width: 100%;
height: 100%;
display: block;
// 鼠标小手
cursor: pointer;
}
}
}
}
</style>
再发一下你的页面布局代码
使用的是vue3+vite来实现的,设置overflow : auto;的是最外层的body,列表是如下的v-for的div,想要返回列表页是跳转到原始浏览位置。
<template>
<div class="sui-content">
<div class="sui-content-title">
<div class="sui-content-item" v-for="item in modelList">
<el-card class="sui-content-card">
<img
:src="baseUrl + item.mid + '.jpg'"
class="sui-content-image"
@click="handleClick(item.mid)"
/>
<div style="padding: 10px; text-align: center">
<span>{{ item.mid }}</span>
</div>
</el-card>
</div>
</div>
</div>
</template>