interest-purchase/src/components/iphLeftMenu.vue

<!--
 * @Descripttion: 左侧导航菜单
 * @version: 1.0.0
 * @Author: dream
 * @Date: 2021-03-27 14:13:43
 * @LastEditors: dream
 * @LastEditTime: 2021-03-28 13:42:16
-->
<template>
	<scroll-view class="left-menu-main" scroll-y>
    <block v-for="(item, index) in list" :key="index">
      <view
        :class="['menu-item', item.value === current ? 'active' : '']"
        :id="`menu-item-${item.value}`"
        @click="changeMenu(item.value)"
      >{{item.label}}</view>
    </block>
    <view
      class="menu-bar"
      :style="{
        height: `${bar.height}rpx`,
        top: `${bar.top}rpx`
      }"
    ></view>
    <view
      class="menu-content-bar"
      :style="{
        height: `${contentBar.height}rpx`,
        top: `${contentBar.top}rpx`
      }"
    ></view>
  </scroll-view>
</template>

<script>
export default {
  name: 'iphLeftMenu',
  props: {
    value: {
      type: Number || String,
      default: 1
    },
    list: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      bar: {
        top: 32,
        height: 28
      },
      contentBar: {
        top: 0,
        height: 92
      }
    }
  },
  mounted () {
    this.changeMenu(this.value)
  },
  methods: {
    changeMenu (val) {
      this.$emit('input', val)
      const warp = uni.createSelectorQuery().in(this).select('.left-menu-main')
      const view = uni.createSelectorQuery().in(this).select(`#menu-item-${val}`)
      view.boundingClientRect(data => {
        warp.fields({
          rect: true,
          scrollOffset: true
        }, res => {
          if (data) {
            this.bar.top = (data.top - res.top + res.scrollTop + 16) * 2
            this.bar.height = (data.height - 32) * 2
            this.contentBar.top = (data.top - res.top + res.scrollTop) * 2
            this.contentBar.height = data.height * 2
          } else {
            this.bar.top = 32
            this.bar.height = 28
            this.contentBar.top = 0
            this.contentBar.height = 92
          }
        }).exec()
      }).exec()
    }
  }
}
</script>

<style lang="scss" scoped>
.left-menu-main {
  position: relative;
  width: 160px;
  height: 100%;
  overflow-y: auto;
  .menu-item {
    padding: 28px;
    font-weight: 500;
    text-align: center;
    color: $iph-tip-text;
  }
  .active {
    color: $u-type-primary;
  }
  .menu-bar {
    z-index: -1;
    position: absolute;
    left: 0;
    width: 6px;
    background: $u-type-primary;
    border-radius: 4px;
    transition: all .3s ease;
  }
  .menu-content-bar {
    z-index: -2;
    position: absolute;
    left: 0;
    width: 100%;
    background-color: $iph-standby-bg;
    transition: all .3s ease;
  }
}
</style>