联动滑动电梯

## 组件

```
// CurrentWeekMenu.vue

<template>
  <div class="CurrentWeekMenu_root">
    <div class="week_box">
      <div v-for="(item, index) in weekList" :key="item.id" class="week-item_box"
           :class="activeSectionDate === index ? 'active' : ''" @click="scrollToSection(index)">
        <div class="week-item_name">{{ item.name }}</div>
        <div class="week-item_date">{{ item.date }}</div>
      </div>
    </div>
    <div class="food-menu_box" ref="foodMenuBoxRef">
      <div class="food-menu-group_box" v-for="(weekItem, weekIndex) in thisWeek" :key="weekIndex"
           :id="'food-menu-group_' + weekIndex">
        <div class="food-menu-item_box" v-for="item in weekItem" :key="item.id" :id="item.id"
             @click="checked = !checked">
          <div class="food-menu-item_img">
            <van-image
              width="2.13333rem"
              height="1.52rem"
              fit="cover"
              :src="item.imgUrl"
            >
              <template v-slot:loading>
                <van-loading type="spinner" size="20"/>
              </template>
              <template v-slot:error>暂无图片</template>
            </van-image>
          </div>
          <div class="food-menu-item_cotent">
            <div class="food-menu-item_cotent_title">{{ buttonTitle(item) }}</div>
            <div class="food-menu-item_cotent_desc">{{ item.mealName }}</div>
          </div>
          <div class="check-box">
            <van-checkbox icon-size="22px" :value="checked" checked-color="#27AFE9"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

export default {
  name: 'CurrentWeekMenu',
  data() {
    return {
      foodMenuBoxRef: null,
      weekList: [],
      activeSectionDate: 0,
      checked: false,
      thisWeek: [],
      diningLocation: null,
    }
  },
  computed: {
    ...mapState('user', ['userno']),
    buttonTitle() {
      return function (item) {
        if (item.dayType === 1 && item.packageTypeView === 1) return '中餐A'
        if (item.dayType === 1 && item.packageTypeView === 2) return '中餐B'
        if (item.dayType === 2 && item.packageTypeView === 1) return '晚餐A'
        if (item.dayType === 2 && item.packageTypeView === 2) return '晚餐B'
        if (item.dayType === 3 && item.packageTypeView === 1) return '夜宵A'
        if (item.dayType === 3 && item.packageTypeView === 2) return '夜宵B'
      }
    },
  },
  mounted() {
    this.weekList = getWeekList()
    this.foodMenuBoxRef = this.$refs.foodMenuBoxRef
    this.addScrollListener()
  },
  beforeDestroy() {
    this.removeScrollListener()
  },
  methods: {
    toDetails(diningLocation) {
      if (diningLocation || diningLocation === 0) {
        this.diningLocation = diningLocation
      }
      this.init()
    },
    async init() {
      // 初始化请求
      // const res = await this.$api.getMealWeek({ data })
      // if (res && res.code == 200) {
      // MOCK DATA
      const thisWeek = [
        [
          {
            'dayType': 1,
            'packageTypeView': 1,
            'id': '1777139548187209750',
            'imgUrl': '',
          },
          {
            'dayType': 1,
            'packageTypeView': 2,
            'id': '1777139566210134034',
            'imgUrl': '',
          },
          {
            'dayType': 2,
            'packageTypeView': 1,
            'id': '1777139584275001380',
            'imgUrl': '',
          },
          {
            'dayType': 2,
            'packageTypeView': 2,
            'id': '1777139602402783263',
            'imgUrl': '',
          },
          {
            'dayType': 3,
            'packageTypeView': 1,
            'id': '1777139620534759428',
            'imgUrl': '',
          },
          {
            'dayType': 3,
            'packageTypeView': 2,
            'id': '1777139638725455893',
            'imgUrl': '',
          },
        ],
        [
          {
            'dayType': 1,
            'packageTypeView': 1,
            'id': '1777139656870015021',
            'imgUrl': '',
          },
          {
            'dayType': 1,
            'packageTypeView': 2,
            'id': '1777139674964242501',
            'imgUrl': '',
          },
          {
            'dayType': 2,
            'packageTypeView': 1,
            'id': '1777139693045886980',
            'imgUrl': '',
          },
          {
            'dayType': 2,
            'packageTypeView': 2,
            'id': '1777139711064616994',
            'imgUrl': '',
          },
          {
            'dayType': 3,
            'packageTypeView': 1,
            'id': '1777139729058181160',
            'imgUrl': '',
          },
          {
            'dayType': 3,
            'packageTypeView': 2,
            'id': '1777139747097882683',
            'imgUrl': '',
          },
        ],
        [
          {
            'dayType': 1,
            'packageTypeView': 1,
            'id': '1777139765095641094',
            'imgUrl': '',
          },
          {
            'dayType': 1,
            'packageTypeView': 2,
            'id': '1777139783076622359',
            'imgUrl': '',
          },
          {
            'dayType': 2,
            'packageTypeView': 1,
            'id': '1777139801141489688',
            'imgUrl': '',
          },
          {
            'dayType': 2,
            'packageTypeView': 2,
            'id': '1777139819176996910',
            'imgUrl': '',
          },
          {
            'dayType': 3,
            'packageTypeView': 1,
            'id': '1777139837183143958',
            'imgUrl': '',
          },
          {
            'dayType': 3,
            'packageTypeView': 2,
            'id': '1777139855189291019',
            'imgUrl': '',
          },
        ],
        [
          {
            'dayType': 1,
            'packageTypeView': 1,
            'id': '1777139873262546953',
            'imgUrl': '',
          },
          {
            'dayType': 1,
            'packageTypeView': 2,
            'id': '1777139891268694020',
            'imgUrl': '',
          },
          {
            'dayType': 2,
            'packageTypeView': 1,
            'id': '1777139909249675312',
            'imgUrl': '',
          },
          {
            'dayType': 2,
            'packageTypeView': 2,
            'id': '1777139927285182468',
            'imgUrl': '',
          },
          {
            'dayType': 3,
            'packageTypeView': 1,
            'id': '1777139945396187167',
            'imgUrl': '',
          },
          {
            'dayType': 3,
            'packageTypeView': 2,
            'id': '1777139963565912122',
            'imgUrl': '',
          },
        ],
        [
          {
            'dayType': 1,
            'packageTypeView': 1,
            'id': '1777139981689499674',
            'imgUrl': '',
          },
          {
            'dayType': 1,
            'packageTypeView': 2,
            'id': '1777139999913750587',
            'imgUrl': '',
          },
          {
            'dayType': 2,
            'packageTypeView': 1,
            'id': '1777140018066698294',
            'imgUrl': '',
          },
          {
            'dayType': 2,
            'packageTypeView': 2,
            'id': '1777140036118982681',
            'imgUrl': '',
          },
          {
            'dayType': 3,
            'packageTypeView': 1,
            'id': '1777140054271930386',
            'imgUrl': '',
          },
          {
            'dayType': 3,
            'packageTypeView': 2,
            'id': '1777140072328409098',
            'imgUrl': '',
          },
        ],
        [
          {
            'dayType': 1,
            'packageTypeView': 1,
            'id': '1777140090326167562',
            'imgUrl': '',
          },
          {
            'dayType': 1,
            'packageTypeView': 2,
            'id': '1777140108340703297',
            'imgUrl': '',
          },
          {
            'dayType': 2,
            'packageTypeView': 1,
            'id': '1777140126359433260',
            'imgUrl': '',
          },
          {
            'dayType': 2,
            'packageTypeView': 2,
            'id': '1777140144352997408',
            'imgUrl': '',
          },
          {
            'dayType': 3,
            'packageTypeView': 1,
            'id': '1777140162459807751',
            'imgUrl': '',
          },
          {
            'dayType': 3,
            'packageTypeView': 2,
            'id': '1777140180516286526',
            'imgUrl': '',
          },
        ],
        [
          {
            'dayType': 1,
            'packageTypeView': 1,
            'id': '1777140198723760148',
            'imgUrl': '',
          },
          {
            'dayType': 1,
            'packageTypeView': 2,
            'id': '1777140216935428131',
            'imgUrl': '',
          },
          {
            'dayType': 2,
            'packageTypeView': 1,
            'id': '1777140235092570129',
            'imgUrl': '',
          },
          {
            'dayType': 2,
            'packageTypeView': 2,
            'id': '1777140253102911511',
            'imgUrl': '',
          },
          {
            'dayType': 3,
            'packageTypeView': 1,
            'id': '1777140271121641521',
            'imgUrl': '',
          },
          {
            'dayType': 3,
            'packageTypeView': 2,
            'id': '1777140289102622762',
            'imgUrl': '',
          },
        ],
      ]
      this.thisWeek = thisWeek
      // }
    },
    updateActiveSection: throttle(function () {
      for (let sectionIndex of this.thisWeek.keys()) {
        const sectionElement = document.getElementById('food-menu-group_' + sectionIndex)
        const sectionRect = sectionElement.getBoundingClientRect()
        const sectionTop = sectionRect.top + sectionRect.height - this.foodMenuBoxRef.getBoundingClientRect().top
        if (sectionTop >= 0) {
          this.activeSectionDate = sectionIndex
          break
        }
      }
    }, 50),
    scrollToSection(idx) {
      this.removeScrollListener()
      this.activeSectionDate = idx
      const element = document.getElementById('food-menu-group_' + idx)
      if (element) {
        this.foodMenuBoxRef.scrollTo({ top: element.offsetTop })
      }
      this.$nextTick(() => {
        this.addScrollListener()
      })
    },
    addScrollListener() {
      this.foodMenuBoxRef.addEventListener('scroll', this.updateActiveSection)
    },
    removeScrollListener() {
      this.foodMenuBoxRef.removeEventListener('scroll', this.updateActiveSection)
    },
  },
}
</script>

```

## 使用

```
<CurrentWeekMenu ref="currentWeekMenu"/>

Leanote's Blog

Navigation

Recent Posts

Friend Links