[JavaScript知识库]楼层左侧楼层浮动菜单

<template>
  <div class="float-storey" v-if="visibleMenu">
    <a-button
      v-for="(item, index) in menuArray"
      :key="index"
      :class="[checkLevel(index) == index ? 'float-storey-active' : '']"
      size="large"
      @click="onItemClick(index)"
    >
      <b>{{ index + 1 }}</b>层
      <a-divider type="horizontal" />
      {{ item.templateName }}
    </a-button>
  </div>
</template>
<script>
/**
 * Created by Pan zhenyu.
 *
 * 首页左边楼层浮动菜单
 *
 */
export default {
  name: 'FloatStorey',
  props: {
    menuArray1:{
      type:Array,
    }
  },
  components: {},
  data() {
    return {
      visibleMenu: false,
      pageScrollY: 0,
      offsetValue: 156,
      activeLevel: -1,
      menuArray: [],
      storeData: {},
    }
  },
  created() {
    this.storeData = this.$store.getters.getStoreData || {}
    // this.menuArray = [
    //   { title: "中药", pageY: 0 },
    //   { title: "西药", pageY: 0 },
    //   { title: "特惠", pageY: 0 },
    //   { title: "调理", pageY: 0 },
    //   { title: "活动", pageY: 0 },
    // ];
    this.menuArray1.forEach(element => {
     return element.pageY = 0
    });
    this.menuArray = this.menuArray1
    console.log(this.menuArray);
    // this.menuLength = this.menuArray.length
    // 获取楼层数据
    // this.getShopFloor()
  },
  mounted() {
    this.getLevelHeight()
    window.addEventListener('scroll', () => {
      this.pageScrollY = window.scrollY || window.pageYOffset
      if (
        this.menuArray.length > 0 &&
        this.pageScrollY >= this.menuArray[0].pageY - 400
      ) {
        this.visibleMenu = true
      } else {
        this.visibleMenu = false
      }
    })
  },
  methods: {
    // 获取楼层列表
    // getShopFloor() {
    //   let params = { storeId: this.storeData.id }
    //   this.$http('GET', 'specialList', params)
    //     .then((res) => {
    //       if (res.data && res.data.length > 0) {
    //         this.menuArray = res.data
    //         // console.log('333',res);
    //         this.menuArray.forEach((element) => {
    //           element.pageY = 0
    //         })
    //         // this.pageData = res.data
    //         console.log('====================================');
    //         console.log(this.menuArray);
    //         console.log('====================================');
    //       }
    //     })
    //     .catch((err) => {
    //       this.$message.error('提示:' + err.msg || '')
    //     })
    // },
    getLevelHeight() {
      let length = this.menuArray.length
      for (let i = 1; i <= length; i++) {
        let levelItem = document.getElementById(`level_${i}`)
        if (levelItem) {
          this.menuArray[i - 1].pageY = levelItem.offsetTop
        }
      }
    },
    checkLevel(i) {
      this.activeLevel = -1
      if (!this.menuArray.length) {
        this.activeLevel = -1
        return -1
      }
      if (
        i === this.menuArray.length - 1 &&
        this.pageScrollY + this.offsetValue >= this.menuArray[i].pageY
      ) {
        this.activeLevel = i
        return i
      }
      if (
        this.pageScrollY + this.offsetValue >= this.menuArray[i].pageY &&
        this.pageScrollY + this.offsetValue < this.menuArray[i + 1].pageY
      ) {
        this.activeLevel = i
        return i
      }
      return -1
    },
    onItemClick(index) {
      let levelItem = document.getElementById(`level_${index + 1}`)
      if (levelItem) {
        window.scrollTo({
          top: levelItem.offsetTop - this.offsetValue,
          behavior: 'smooth',
        })
      }
      // levelItem.scrollIntoView({
      //   behavior: "smooth",
      // });
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.float-storey {
  width: 30px;
  position: fixed;
  left: 30px;
  top: 40vh;
  z-index: 200;

  .float-storey-active {
    color: @theme-color!important;
  }

  .ant-btn {
    width: 130px;
    height: 60px;
    margin-bottom: 5px;
    line-height: 0;
    background-color: white;
    // border-radius: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-color: white;
    &:focus {
      color: rgba(0, 0, 0, 0.65);
    }
    &:hover {
      background-color: lighten(white, 25%);
    }
    .ant-divider-horizontal {
      margin: 12px 0;
    }
  }
}
</style>