微信小程序点击item使其位于屏幕中间位置

1.需求

希望实现类似于猫眼电影应用中选择场次时，界面自动将所选内容滚动至屏幕中央的交互效果。如下图所示，为该功能最终呈现的效果展示。

2.分析

达成此类效果的途径共有三种：

1. 直接采用原生CSS与JavaScript进行开发；

2. 引入swiper组件，实现单屏展示多个项目，点击项目时可自动滚动至中央位置；

3. 结合微信的scroll-view组件与JavaScript完成实现。

经过综合考量后，最终决定采用第三种方式。原因在于该方法为微信平台原生支持的功能，使用过程中能够确保操作的流畅性。相比之下，swiper组件在使用时会带来较大的代码冗余，而直接使用原生方法则需要处理较多兼容性问题，整体实现过程较为繁琐。

3.代码

wxml

  
    
  <view class="items-box">
    
       <scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%" bindscroll="scrollMove" scroll-l