vue3使用vant4的列表vant-list点击进入详情自动滚动到对应位置，踩坑日记（一天半的踩坑经历）

06-27 1111阅读

1.路由添加keepAlive

2.路由添加mate标识

 {
        path: "/user-manage", // 用户管理
        name: "user-manage",
        meta: {
          keepAlive: true, //此页面需要缓存
          isBack: false,
          scrollTop:0
        },
        component: () => import("../pages/user/index.vue"),
      },

3.在beforeRouteEnter里面给如果从详情页面返回meta.isBack改变值为true ps(beforeRouteEnter这个生命周期函数里滑动不生效需要在onActivated里面执行)，（因为vu3 setup里面没有beforeRouteEnter）需要单独引入一个script,在onActivated生命周期函数里让页面滑动到指定位置（全部代码）

  
    
    
    
    
      
        
          
        
        
      
    
    
      
        
          
            
              
                {{ item.userIdentity?.value + index }}
              
              账号: {{ item.account }}
            
            
              
            
          
          
            创建时间 : {{ item.createTime }}
            {{ item.enableStatus?.value }}
          
        
      
    
    添加用户
    
    
      
        账户类型
        
          
            电站业主
            
          
          
            经销商
            
          
          
            服务商
            
          
          
            安装商
            
          
        
        创建时间
        
          
            {{
              state.queryType.startTime == ""
                ? "开始时间"
                : state.queryType.startTime
            }}
          
          ~
          
            {{
              state.queryType.endTime == ""
                ? "结束时间"
                : state.queryType.endTime
            }}
          
        
        
          重置
          确定
        
      
    
    
    
      
    
  


import { defineComponent } from "vue";
export default defineComponent({
  beforeRouteEnter(to, from, next) {
    if (from.name === "edit-user") {
      to.meta.isBack = true;
      window.scrollTo({
        top: 300,
        behavior: "smooth", // 平滑滚动
      });
      console.log("beforeRouteEnter");
      console.log(from.meta);
      console.log(store.state.listHeight);
      console.log("beforeRouteEnter");
    } // 放行路由
    next();
  },
});


import daohang from "../../assets/daohang.png";
import {
  getCurrentInstance,
  onMounted,
  reactive,
  inject,
  ref,
  onActivated,
  onUnmounted,
  nextTick,
  watch,
} from "vue";
import TopMenu from "../../component/topMenu.vue";
import { useRouter, useRoute, onBeforeRouteLeave } from "vue-router";
import store from "@/store/index";
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const wrapper = ref(null);
const state = reactive({
  menuText: "用户管理",
  pathName: "",
  bgColor: "transparent",
  activeColor: "#EA5514",
  backgroundColor: "#F9EBE5",
  loading: false,
  finished: false,
  list: [],
  pageNum: 1,
  backgroundColor: "transparent",
  checked: true,
  show: false,
  showPop: false,
  queryType: {
    endTime: "",
    keyword: "",
    startTime: "",
  },
  pageType: {
    pageIndex: 1,
    pageSize: 10,
  },
  currentScrollTop: 0,
  timeType: 0,
});
watch(
  () => state.queryType.keyword, // 要监听的响应式属性
  (newValue, oldValue) => {
    // 当属性值变化时，这个回调函数会被调用
    console.log(newValue);
    if (newValue == "") {
      init();
    }
  }
);
// 列表触底加载
const onLoad = () => {
  console.log("触底了");
  state.loading = false;
  state.pageType.pageIndex++;
  getList();
};
// 监听页面滚动的方法
const doScroll = (event) => {
  console.log(window.scrollY);
  state.currentScrollTop = window.scrollY;
  if (window.scrollY > 20) {
    state.bgColor = "#D6E6F9";
    state.backgroundColor = "#D6E6F9";
  } else {
    state.bgColor = "transparent";
    state.backgroundColor = "transparent";
  }
};
// 数据初始化
const init = () => {
  state.list = [];
  state.finished = false;
  state.pageType.pageIndex = 1;
  getList();
};
// 查询
const searchList = () => {
  state.pageType.pageIndex = 1;
  state.finished = false;
  state.list = [];
  getList();
};
const updataChange = (value) => {
  console.log(value);
};
// 查询用户列表
const getList = () => {
  state.loading = true;
  proxy.$H
    .post(proxy, proxy.$A.user.list, {
      data: state.queryType,
      page: state.pageType,
    })
    .then((res) => {
      let lists = res.data.data;
      state.loading = false;
      if (lists.length > 0) {
        for (let item of lists) {
          if (item.enableStatus.key == "ENABLE") {
            item.checked = true;
          } else {
            item.checked = false;
          }
          item.switchLoading = false;
        }
      }
      if (lists.length  {
  console.log(item);
  item.switchLoading = true;
  proxy.$H
    .post(proxy, proxy.$A.user.updateEnableStatus, {
      data: {
        key: item.id,
        value: item.checked ? "DISABLE" : "ENABLE",
      },
    })
    .then((res) => {
      item.switchLoading = false;
      init();
    })
    .catch((err) => {
      item.switchLoading = false;
    });
};
// 新增用户
const addUser = () => {
  console.log("点了新增用户");
  router.push("/add-user");
};
// 用户详情
const goUserDetail = (item) => {
  // store.commit("setDetailFlag", true);
  console.log("点击了详情");
  store.commit("setListHeight", state.currentScrollTop);
  router.push({path:'/edit-user',query:{id:item.id}})
  
};
// 选择开始时间
const selectStartTime = () => {
  state.showPop = true;
  state.timeType = 0;
};
// 选择结束时间
const selectEndTime = () => {
  state.showPop = true;
  state.timeType = 1;
};
// 时间picker触发的事件
const selectTime = (value) => {
  let time =
    value.selectedValues[0] +
    "-" +
    value.selectedValues[1] +
    "-" +
    value.selectedValues[2];
  console.log(time);
  if (state.timeType == 0) {
    state.queryType.startTime = time;
  } else {
    state.queryType.endTime = time;
  }
  state.showPop = false;
};
// 更多筛选点击确定
const getMoreQuery = () => {
  if (state.queryType.startTime != "") {
    if (state.queryType.endTime == "") {
      proxy.$U.errMsg("请选择结束时间");
      return;
    }
  }
  state.show = false;
  init();
};
// 重置查询条件
const restQuery = () => {
  state.queryType = {
    endTime: "",
    keyword: "",
    startTime: "",
  };
};
onMounted(() => {
  // 当天日期
  console.log("onMounted");
  // 监听页面滚动
  window.addEventListener("scroll", doScroll, true);
});
onUnmounted(() => {
  window.removeEventListener("scroll", doScroll);
});
onActivated(() => {
  console.log("onActivated");
  console.log(route.meta.isBack);
  console.log("onActivated");
  if (!route.meta.isBack) {
    // 不是从详情页面进来的就重新加载数据
    init();
    route.meta.isBack = false;
  }
  window.scrollTo({
    top: store.state.listHeight,
    behavior: "smooth", // 平滑滚动
  });
});


@import "./index.less";
.dialog-content {
  max-height: 60vh;
  overflow-y: scroll;
  border: 1px solid red;
  padding: 20px;
  .dia-cent {
    margin-bottom: 3px;
  }
}