vue2模仿外卖平台电梯效果

## 组件

```vue
// ElevatorScroll.vue

<template>
  <div
    class="elevator-container"
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
    ref="elevatorContainerRef"
  >
    <div
      class="section"
      v-for="(item, index) in items"
      :key="item.id"
      :ref="`section-${index}`"
    >
      <slot :item="item.list" :index="index"></slot>
    </div>
    <div v-if="showHint && consistentDirection" :class="['scroll-hint', hintPosition]"
         :style="{ opacity: hintOpacity }">{{ hintMessage }}
    </div>
  </div>
</template>

```

## 不需要左边电梯楼层提示的使用

```vue
<template>
  <ElevatorScroll :items="items">
    <template v-slot:default="{ item, index }">
      <div :style="{height: '1000px', backgroundColor: !index ? 'red': 'blue'}">
        <h2>{{ item.label }}</h2>
        <p>{{ item.content }}</p>
      </div>
    </template>
  </ElevatorScroll>
</template>

export default {
  components: {
    ElevatorScroll,
  },
  data() {
    return {
      items: [
        { label: '电梯1', content: '这里是电梯1的内容...' },
        { label: '电梯2', content: '这里是电梯2的内容...' },
      ],
    }
  },
}
</script>

```

## 显示左边电梯楼层

```vue
// CurrentWeekMenu.vue

<template>
  <div class="CurrentWeekMenu_root">
    <div class="week_box" ref="weekBoxRef">
      <div v-for="(item, index) in weekList" :key="item.id" class="week-item_box" :id="`week-item_${item.id}`"
           :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">
      <ElevatorScroll :items="thisWeek" :activeSectionDate.sync="activeSectionDate" ref="elevatorScrollRef">
        <template v-slot:default="{ item: weekItem, index: weekIndex }">
          <div class="food-menu-group_box" :id="'food-menu-group_' + weekIndex">
            <div class="food-menu-item_box" v-for="(item, index) in weekItem" :key="item.id" :id="item.id"
                 @click="orderedChange(item)"
                 :class="itemGroupClass(item, index, weekItem)">
              <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) }}-{{ weekIndex }}</div>
                <div class="food-menu-item_cotent_desc">{{ item.mealName }}</div>
              </div>
              <div class="check-box">
                <van-checkbox icon-size="22px" :value="item.ordered" checked-color="#27AFE9"/>
              </div>
            </div>
          </div>
        </template>
      </ElevatorScroll>
    </div>
  </div>
</template>

export default {
  name: 'CurrentWeekMenu',
  mixins: [orderMixin],
  components: {
    ElevatorScroll,
  },
  data() {
    return {
      weekList: [],
      activeSectionDate: 0,
      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'
      }
    },
    itemGroupClass() {
      return function (item, index, list = []) {
        if (index < list.length - 1 && item.dayType !== list[index + 1].dayType) {
          return 'food-menu-item_group'
        }
        return ''
      }
    },
  },
  watch: {
    activeSectionDate(nv, ov) {
      if (nv !== ov && nv) {
        this.$nextTick(() => {
          const element = this.$refs.weekBoxRef.querySelector(`#week-item_${ nv }`)
          if (element) {
            const container = this.$refs.weekBoxRef
            // 计算元素顶部相对于容器顶部的距离
            const elementTopRelativeToContainer = element.offsetTop - container.offsetTop
            // 计算元素中心相对于元素顶部的距离
            const elementCenter = element.offsetHeight / 2
            // 计算容器中心的位置
            const containerCenter = container.clientHeight / 2
            // 计算滚动位置：元素中心相对于容器顶部的距离 - 容器中心的位置
            const scrollPosition = elementTopRelativeToContainer + elementCenter - containerCenter
            container.scrollTo({
              top: scrollPosition,
              behavior: 'smooth',
            })
          }
        })
      }
    },
  },
  mounted() {
    this.weekList = getWeekList()
  },
  methods: {
    orderedChange(record) {
      if (!this.orderLoading.includes(record.id)) {
        this.dialogEnter(!record.ordered, record)
      }
    },
    toDetails(diningLocation) {
      if (diningLocation || diningLocation === 0) {
        this.diningLocation = diningLocation
      }
      this.init()
    },
    async init() {
      this.$nextTick(() => {
        const elevatorScrollRef = this.$refs.elevatorScrollRef
        if (elevatorScrollRef) {
          elevatorScrollRef.init()
        }
      })
      // 初始化请求
      if (this.userno && this.userno !== 'null') {
        this.$root.openLoading()
        let data = {
          userId: this.userno,
          diningLocation: this.diningLocation,
        }
        let res = await this.$api.getMealWeek({ data })
        if (res && res.code == 200) {
          const thisWeek = res.data && res.data.thisWeek && res.data.thisWeek.length ? res.data.thisWeek.map(item => {
            return {
              id: uuidv4(),
              ...item,
              list: (item.list || []).map(item => ({
                ...item,
                ordered: item.dayPeopleStatus == 2 && item.packageType == item.packageTypeView,
              })),
            }
          }) : []
          this.thisWeek = thisWeek
        }
      }
    },
    scrollToSection(idx) {
      this.activeSectionDate = idx
    },
  },
}
</script>

```

Leanote's Blog

Navigation

Recent Posts

Friend Links