【总结】微信小程序 - 用动画实现自定义轮播图

最近小程序有个需求要做一个类似轮播的自定义样式，搜了一下插件们，一般都用到了jQuery，但是小程序又不支持操作DOM，所以直接自己卷起袖子干吧。
如果有任何有问题的地方，欢迎各位看官指出，大家一起讨论才能进步地更快XD

文章基本流程：
1.效果图
2.实现代码
3.被放弃的提案及理由(TAT)
4.总结

1.首先放实现的效果图

因为需求里只有中间的三张图，所以之后会把旁边两张的opacity调成0，这里为了方便看就留着啦。

2. 代码

a. wxml

这里之前考虑过要使用template，毕竟比较方便。但是每个图片又会再绑定不同的动画效果，所以就直接这样摊大饼展开写了，如果谁有更好的方法，答应我，一定要告诉我，好嘛 :)

<view style="white-space: nowrap;" class="box" bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend">
    <view class="club" animation="{
   {
   animation1}}" bindtap="scrollLeft">
      <image src="{
   {
   clubs[0].image}}"/>
      <text>{
   {
   clubs[0].name}}</text>
    </view>
    <view class="club" animation="{
   {
   animation2}}" bindtap="scrollLeft">
      <image src="{
   {
   clubs[1].image}}"/>
      <text>{
   {
   clubs[1].name}}</text>
    </view>
    <view class="club" animation="{
   {
   animation3}}">
      <image src="{
   {
   clubs[2].image}}"/>
      <text>{
   {
   clubs[2].name}}</text>
    </view>
    <view class="club" animation="{
   {
   animation4}}" bindtap="scrollRight">
      <image src="{
   {
   clubs[3].image}}"/>
      <text>{
   {
   clubs[3].name}}</text>
    </view>
    <view class="club" animation="{
   {
   animation5}}" bindtap="scrollRight">
      <image src="{
   {
   clubs[4].image}}"/>
      <text>{
   {
   clubs[4].name}}</text>
    </view>
  </view>

b. wxss

这里因为没有涉及到图片互相遮盖的问题，所以大胆地使用了opacity，但是如果做成了叠加效果的话，我的方法是使用伪类:after或者:before在图片上加一个白色背景色带透明度的