微信小程序点击item使之滚动到屏幕中间

最新推荐文章于 2024-10-17 10:42:53 发布

原创

最新推荐文章于 2024-10-17 10:42:53 发布 · 3.7k 阅读

8 ·

CC 4.0 BY-SA版权

1.需求

想做类似猫眼电影选场次会自动滚动到屏幕中间的效果

如图是最终效果

2.分析

实现这种效果的方法有三种：

1.直接使用原生CSS+js;

2.使用swiper,一屏显示多个item,点击item会自动滚动到中间

3.使用微信的scroll-view配合JS实现

权衡了一下最终选择了第三个方案，比较是微信自带的方法，使用起来会比较流畅，swiper的话会比较臃肿，原生的话就比较麻烦，需要考虑的兼容问题比较多。

3.代码

wxml


 <view class="items-box">
      <scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%" bindscroll="scrollMove" scroll-left='{
  
  {scrollLeft}}' scroll-with-animation="true">
        <view class="scroll-wrapper">
          <view id="scroll-item-{
  
  {index}}" class="item-pic {
  
  {selectItemIndex==index?'on':''}}" wx:for="{
  
  {ticketDetails}}" wx:key="index" bindtap="selectItem" data-index="{
  
  {index}}" data-name="{
  
  {item.TicketTitle}}" data-ticketid='{