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

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

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

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

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

我啊。

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

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

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

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

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

还本来就菜。

话不多说，上点正菜吧。

思路及实现方式

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

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

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

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

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

我就直接贴代码了：

// index.jsPage({  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。