vue3结合vant手写一个隐藏式菜单

最新推荐文章于 2023-12-08 14:14:58 发布

麦多馅饼

最新推荐文章于 2023-12-08 14:14:58 发布

阅读量1.1k

点赞数

分类专栏： vue 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/zhang1509123907/article/details/125911949

版权

vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

利用van-popup组件写一个隐藏式菜单，先获取元素的长度，然后监听滚动条，利用元素下标值，计算高度，就能定位到理想位置

    <!-- 菜单 -->
    <div class="menus-box">
      <img
        class="menus"
        src="../../../public/nav.png"
        @click="data.openMenus = true"
        v-if="!data.openMenus && !data.type"
      />
      <van-popup v-model:show="data.openMenus" position="right" :style="{ width: '50%', height: '100%' }">
        <div class="choose-box">
          <div class="choose-head">
            <van-image
              round
              width="5rem"
              height="5rem"
              fit="cover"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
            />
            <div class="logo-name">标题名字</div>
          </div>
          <van-cell-group v-for="(item, index) in data.indexList1" :key="index">
            <van-cell :title="item" icon="location-o" is-link @click="btn(index)" />
          </van-cell-group>
        </div>
      </van-popup>
    </div>

let scrollTop = ref(0)
const myRef = ref(HTMLElement)
const header = ref(HTMLElement)

onMounted(() => {
  getWindowResize()
  window.addEventListener("resize", getWindowResize)
  handleScroll()
})
onBeforeUnmount(() => {
  window.removeEventListener("scroll", () => {})
  window.removeEventListener("resize", () => {})
})

const handleScroll = () => {
  window.addEventListener("scroll", () => {
    scrollTop.value = window.scrollY
  })
}
const btn = e => {
  data.openMenus = false
  document.body.scrollTop = header.value.clientHeight + (myRef.value[0].clientHeight + 18.39 - e) * e
  document.documentElement.scrollTop = header.value.clientHeight + (myRef.value[0].clientHeight + 18.39 - e) * e
}

注意：van-popup组件侧拉要设置width跟height，否则不生效，根本弹不出来；离开页面的时候，要记得销毁监听removeEventListener

其他：

监听滚动条的位置

let oldScrollTop = ref(0) // 记录上一次滚动结束后的滚动距离
let scrollFixedStatus = ref(true)
watch(
  () => scrollTop.value,
  (newValue, oldValue) => {
    setTimeout(() => {
      if (newValue === window.scrollY) {
        // 延时执行后当newValue等于window.scrollY，代表滚动结束
        // console.log("滚动结束", scrollTop.value)
        oldScrollTop = newValue // 每次滚动结束后都要给oldScrollTop赋值
        // scrollFixedStatus.value = true;
      }
    }, 20) // 必须使用延时器，否则每次newValue和window.scrollY都相等，无法判断，20ms刚好大于watch的侦听周期，故延时20ms
    if (oldScrollTop.value === oldValue) {
      scrollFixedStatus.value = false
      // 每次滚动开始时oldScrollTop与oldValue相等
      // console.log("滚动开始", scrollTop.value)
    }
  }
)

获取屏幕尺寸

// 屏幕宽度
const windowWidth = ref(0)
// 屏幕高度
const windowHeight = ref(0)
// 获取屏幕尺寸
const getWindowResize = function () {
  windowWidth.value = window.innerWidth
  windowHeight.value = window.innerHeight
  data.type = windowWidth.value < 750 ? false : true
}