小程序swiper从左向右和从上往下滑动--只支持自动滑动

小程序自带的swiper插件在很多时候并不是很适用，在需要无缝衔接轮播时，可能会出现明显的卡顿感，这个时候可以使用简单的css进行控制。

例如从上往下滑动（实现一种简单的红包雨）：

<view class="swiper">
  <view class="swiper-item">
    <image src="../../images/index/packet-rain.png" class="item_img"></image>
    <image src="../../images/index/packet-rain.png" class="item_img"></image>
  </view>
</view>

.swiper {
      width: 100vw;
      height: 100vh;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
      overflow: hidden;
      transform: rotateX(180deg);

      @keyframes lightmove {
        0% {
          transform: translate(0px, 0px);
        }

        100% {
          transform: translate(0px, -100vh);
        }
      }

      &-item {
        width: 110vw;
        height: 200vh;
        animation: lightmove 8s linear infinite;

        .item_img {
          width: 110vw;
          height: 100vh;
          font-size: 0px;
          transform: rotateX(180deg);
        }
      }
    }

 其实原理就是css控制翻转180°，所以不支持手动滑动，手动滑动会是反的。大概思路就是如下：

//从左往右
swiper{
  transform: rotateY(180deg);
}
//内部图片
image{
   transform: rotateY(180deg);
}  




//从上往下
swiper{
  transform: rotateX(180deg);
}
//内部图片
image{
   transform: rotateX(180deg);
}