Vue2项目使用Vant的Sticky组件实现吸顶固定页面滚动会出现闪动的情况处理

前言：
目前vant2应该已经停止维护了，开发新项目的同学建议直接使用vue3+vant4，vant4版本中应该是没有这个问题了。
vant2版本的Sticky组件，当页面滚动触发吸顶，Sticky组件的postion从默认状态切换到fixed定位就会出现闪动，这也不能说是bug，只是没考虑到用户体验，没处理好罢了。不过目前vant2应该已经停止维护了，还在使用vue2+vant2开发的同学，就只能手动做下优化了。
解决方案：
给个比较简单的方案，就是给Sticky组件外边添加一层容器，设置跟Sticky相等的高度，然后给Sticky添加:offset-top="1"，这样就不会出现闪动了。示例代码如下：

   <div class="stickyBox"> <!-- 占位容器，高度需要与 Sticky 元素一致 -->
      <van-sticky :offset-top="1">
        <van-search class="m_b_30" v-model="keywords" shape="round" placeholder="请输入搜索商品" show-action clearable @search="onSearch" @clear="scrollTop">
          <template #action>
            <van-button class="btn_search f14" type="primary" size="mini" round hover-class="none" @click="onSearch">搜索</van-button>
          </template>
        </van-search>
      </van-sticky>
    </div>

但是，虽然没有闪动了，但给Sticky添加了一个像素的偏移量，页面滚动的时候，组件上方会出现1个像素的区域会显示滚动过的页面内容，所以这里也要再处理下。

处理这个问题，可以考虑使用阴影，使用没有扩展没有模糊的阴影就可以了，代码如下：

<style lang="scss" scoped>
  .stickyBox {
    height: 150px;
    /deep/.van-sticky--fixed {
      box-shadow: 0px -4px 0px 0px white;
    }
  }
</style>

问题完美解决，方法也不复杂！