今天情人节（七夕特辑）

🏩 背景(餐厅)

现在去餐厅订餐，桌角那里差不多都会有一个二维码，叫你扫码自己手机上点菜。扫码进去，要么是公众号的，要么就是小程序。

那我们来看看一个以下案例:

除了点餐系统外，还有一些文档目录用到这种方式的目录导航锚点。比如说文档，或者掘金的右侧的目录也用到了同样的效果。

🔪 剖析原理

监听scroll事件，获取分类最开始的offsetTop，拿当前页面的scrollTop跟这些offsetTop比较，到了就把左边菜单栏的那个分类变颜色。至于点击，点到哪个分类，就找到对应的右侧分类的标题的offsetTop，通过window.scrollTo(0, 要点击分类的右侧内容的offsetTop)就可以使得内容对应滚动到该位置。

🥬 上菜实操

数据结构：【nestjs返回的数据】如若只是测试，可以写死某些数据即可。

http://127.0.0.1:5173/

界面布局：【左（分类）右（内容）】分为两个区域，两边均可滚动。

<template>
  <div class="order">
    <div class="category">
      <div
        v-for="(item, key) in goods"
        :class="{
          'category-name': true,
          active: currentKey === key,
        }"
        :key="key"
        @click="changeCategory(key)"
      >
        {{ item.categoryName }}
      </div>
    </div>
    <div ref="content" class="content" @scroll="handleScroll">
      <div
        v-for="(item, key) in goods"
        :key="key"
        class="content-item"
        ref="categoryRefs"
      >
        <div class="title">{{ item.categoryName }}</div>
        <div
          class="each-item"
          v-for="good in item.goodsList"
          :key="good.goodsCode"
        >
          <div class="image-url">
            <img :src="good.imagePathSmall" />
          </div>
          <div class="desc">
            <div class="goods-name">{{ good.goodsName }}</div>
            <div class="goods-slogan">{{ good.goodsSlogan }}</div>

            <div class="bottom">
              <div>￥{{ good.goodsStandardList[0].acturalPrice }}</div>
              <div>+</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

整体效果如下：

变量以及后端返回的商品列表：

逻辑：（一个是左侧点分类区域）、（一个是滚动右边内容，左侧分类要根据哪个分类变样式）

左侧点击分类区域：

content.value.scrollTo({
    top: categoryRefs.value[key].offsetTop,
    behavior: "smooth",
})

这里值得提的是，scrollTo加behavior方法进行滚动时，可以通过添加behavior参数来指定滚动的动画行为。（smooth 滚动行为具有平滑的动画效果，窗口会平滑地滚动到指定位置）

滚动右边内容：

当内容整体滚动的高度等于或者超过了某个分类的高度，那边就把左侧分类变样式就可以了，变样式通过key的方式来判断active: currentKey === key

注意点：

content.value.scrollTo({
    top: categoryRefs.value[key].offsetTop,
    behavior: "smooth",
});

因为我们设置的scrollTo是带有平滑滑动的属性的behavior: "smooth"，所以导致点击左侧分类，自然而然也会触发到右侧的滚动事件，导致左侧跨多个点击的时候，中间所有的类都会改样式，问题如下：

所以要解决这个问题，思路是，用一个变量，判断左侧点击彻底结束，右侧滚动事件才生效，解决办法如下：

最终效果：

🚶‍♀️ 总结消化

做点餐平台，重点（地图和定位服务、支付平台和第三方支付、配送跟踪）；当然最后用户的体验设计也是很重要的，易用性、响应速度、交互设计的，都会影响到顾客当天来店里吃饭点餐的心情和体验。

以上是关于公众号或者小程序一般的点餐系统的大多数点餐页面滚动效果的研究。

爱在朝夕 不止七夕

☎️ 希望对大家有所帮助，如有错误，望不吝赐教，欢迎评论区留言互相学习。