收藏
回答

安卓微信浏览器获取和设置不了ScrollTop

代码做了兼容处理,安卓获取不到,苹果的就可以
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";
// 使用modelList小仓库
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}`);
  // modelState.setScrollTop(scrollPosition.value);
  // modelState.setMidPostion(mid);
  sessionStorage.setItem("scrollTop", scrollPosition.value);
  // window.open(`https://h5.1pxiu.com/#/?modelId=${mid}`, "_blank"); // 打开新的窗口(跳转路径,跳转类型)
};
</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>


最后一次编辑于  2023-12-07
回答关注问题邀请回答
收藏

1 个回答

  • 大山
    大山
    2023-12-06

    再发一下你的页面布局代码

    2023-12-06
    有用 1
    回复 4
    • 慎独、
      慎独、
      2023-12-06
      2023-12-06
      回复
    • 慎独、
      慎独、
      2023-12-06
      有时间帮忙解决一下呗,我看其他的贴子也有类似问题,但是下面没有答案。
      2023-12-06
      回复
    • 大山
      大山
      2023-12-07回复慎独、
      这个页面的样式属性也贴一下,包括<script>
      2023-12-07
      回复
    • 慎独、
      慎独、
      2023-12-07回复大山
      更新在提问帖子里了
      2023-12-07
      回复
登录 后发表内容