小程序轮播 滑动的时候另一个轮播图也跟着动

好久没碰前端了，写个轮播都废了我这么大功夫。

最近闲着没事写一写小程序，有个要实现的功能是这样的：

如图，上面的色块是个轮播，下面的也是轮播。

滑动上面的轮播，下面的也跟着动，滑动下面的，上面也跟着动。

什么，你说哪个傻子会做这种功能？

我啊。

其实做出来的效果还挺不错的，就看你往轮播里面放什么内容。

我做出来的效果是下面这样的：

当然你也可以自己体验一下效果：

还挺不错的吧，快夸夸我。

但是真的好久没写前端了呀，这点功能都让我写了好久。

还本来就菜。

话不多说，上点正菜吧。

思路及实现方式

小程序的轮播比较容易实现，毕竟有个swiper嘛。

上面的功能要实现，其实就拆分成下面几点：

1. 轮播同步移动
2. 环形轮播
3. 居中显示

轮播同步移动，这个可以借助swiper的current属性，current是几，轮播就显示第几张图片，从0开始计。

再写个函数，用swiper的bindchange调用，实时改变current的值，就能实现上下两张轮播图同步移动了。

我就直接贴代码了：

// index.js
Page({
  data: {
    block: ["blue", "yellow", "green", "red"],
    // swiper当前是第几张图
    swiperCurrent: 0
  },
  changeSwiper(e) {
  	// 获取当前轮播的角标
    let current = e.detail.current;
    // 赋值
    this.setData({
      swiperCurrent: current
    })
  }
})

<!--index.wxml-->
<view class="container">
  <swiper circular="true" class="starSwiper" current="{{swiperCurrent}}" bindchange="changeSwiper">  
      <swiper-item wx:for="{{block}}" wx:key="i" wx:for-index="index" class="starSwiperItem">  
        <view style="background-color: {{item}};width: 750rpx;height: 600rpx;">
          
        </view>
      </swiper-item>  
    </swiper>  
    <swiper circular="true" class="iconSwiper" current="{{swiperCurrent}}" bindchange="changeSwiper" previous-margin="300rpx"	next-margin="300rpx" style="height: 100rpx;">  
      <swiper-item wx:for="{{block}}" wx:for-index="index" wx:key="i" class="iconSwiperItem">  
        <view style="background-color: {{item}};width: 100rpx;height: 100rpx;">
          
        </view>
      </swiper-item>  
    </swiper>
  </view>

下图画红线的，就是轮播同步的关键。

其实就是定义一个变量，让轮播实时显示这个变量所在的轮播图，每次滑动的时候，保持这个变量一致就行。

环形轮播就更容易实现了，不过这真的是个很冷门的知识点，百度了下才知道，就是下面这个标签：

设置一下swiper的circular属性为true就行。

<swiper circular="true"></swiper>

然后你就会发现这个轮播怎么划也划不完啦。

最后是整个轮播图的居中显示。

这个其实前端稍微熟悉点的人都知道，就是用了很简单的flex。

flex布局是个很经典的css样式，说到flex，我总会想起阮一峰老师的flex教程。

这个人，每次搜flex都能搜到他的教程。

技术博主很叼的一点是，当你不管怎么搜都能搜到他的时候，你就会关注他了。

我记得我刚开始学flex的时候就是看他的文章，那还是大二的时候，没想到这么久还要看他的文章，真是永远的经典。

我当然不会承认是我一点进步都没有。

这里贴一贴阮一峰老师的教程，有兴趣的朋友可以去看一看：《Flex 布局教程：语法篇》

再贴一贴这里实现flex的css代码：

/**index.wsxx**/
page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: space-between;
}
swiper {
  width: 100%;
  height: 500rpx;
}

最后

最后说一点废话，工作之后因为主业是java，平时所做、所学的都几乎都是后端和运维了。

很久没有这样，一个产品的全部过程都由自己来做，这是个很不错、也很难受的过程。

从制图、前端、后端再到部署，人是不可能什么都精通的，所以这个过程中，疑问和百度比较多。

读书的时候因为经常这样，导致个人发展有点，什么都会，但又什么都不精。

为此我吃了很多亏，出来找工作还差点找不到。

后来看到网上很多言论，说程序员应该发展深度，再发展广度。

意思就是说，假如你现在是个前端，那么你应该把前端学精，再去考虑学学后端，兴趣也好，增加个人竞争力也罢。

我也不知道这个看法是不是对的，但毕竟年轻人嘛，听话照做就不是年轻人了。

我乐意这样做，这个过程我还乐在其中，这就够了。

在做这个产品的过程我也学到了许多东西，比如为了有一个合适的背景图，我拿起了很久没用的ps，比如如何用java的Graphic2D去画分享海报。

下面也打算写写这个，分享一下。

毕竟是做了努力的作品，还是希望有人看它、用它。

如果你觉得这个东西还挺有趣，愿意把它分享给你的朋友，那就更好了。

所以最后就再分享一下这个作品吧。

enjoy。