关于vue.js:基于Vue实现的侧边栏导航组件自动居中上下滑动切换菜单

左侧边栏导航组件,当左侧导航超过一屏高度时,切换导航具备动画居中成果,能够滑动右侧区域来切换导航,滑动到屏幕底部时主动切换到下个导航,相同滑动到顶部切换上一
下载地址: https://download.csdn.net/dow…
效果图请点击:

次要代码片段:
// 子分类列表

categoryList(id) {
  const res = list2
  const num = Math.ceil(Math.random() * 5)
  console.log(num)
  this.classifyList = getRandom(res.data.slice(0, num))

  // 注因为这里子分类数据只有一个,所有采纳打乱程序的形式显示,理论可依据申请回来的数据来显示
  function getRandom(arr) {
    let [newArr, selItem] = [[], null]
    let len = arr.length
    while (newArr.length < len) {
      selItem = arr[Math.floor(Math.random() * len)]
      if (!newArr.find((item) => item.id == selItem.id)) {
        newArr.push(selItem)
      }
    }
    return newArr
  }
},

tabNav(index, event) {

  const $nav = this.$refs.nav
  let { scrollTop, clientHeight, scrollHeight } = $nav
  const { clientHeight: itemHeight } = $nav.querySelector('.item'),
    len = Math.floor(clientHeight / itemHeight),
    middle = Math.ceil(len / 2) - 1,
    currentScrollHeight = (index - middle) * itemHeight,
    { navIndex } = this,
    prevScroll = Math.abs(index - navIndex) * itemHeight
  let timer = setInterval(() => {
    if (navIndex < index) {
      scrollTop += prevScroll / 16
      $nav.scrollTop = scrollTop
      if (scrollTop >= currentScrollHeight) {
        clearInterval(timer)
        timer = null
      }
    } else {
      scrollTop -= prevScroll / 16
      $nav.scrollTop = scrollTop
      if (scrollTop <= currentScrollHeight) {
        clearInterval(timer)
        timer = null
      }
    }
  }, 20)
  this.$refs.list.scrollTo(0, 0)
  this.isLowest = false
  this.navIndex = index
  this.categoryList(this.navList[index].id)
  this.swiperPicture(this.navList[index].id)
  // this.setClassifyActive(index)
  this.getClassifyActive = index
},

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据