シンプルswiperを達成するために、アプレット

いくつかの単語の男は、スクリーンショットにしました

 

 

 HTML

  <swiperクラス= "swiperブロック" 前マージン= "70rpx" 次マージン= "70rpx" 現在の "0" 自動再生= "true" をbindchange = "swiperChange" 円形= "TRUE">
        <ブロックWXのための：= "{{totalData.banners}}" WX：インデックス= "{{索引}}" WX：キー= "bannerList">
          <swiper項目クラス=「swiper項目」>
            <画像モード= "aspectFill" SRC = "{{item.cover}}"クラス= "スライド画像{{swiperIndex ==インデックス'アクティブ'：？ ''}}" />     
          </ swiper項目>
        </ブロック>
      </ swiper>

CSS

.swiperブロック{
  高さ：320rpx。
  幅：100％;
}

.swiper項目{
  表示：フレックス。
  フレックス方向：カラム;
  正当化 - コンテンツ：センター;
  ALIGN-アイテム：センター;
  オーバーフロー：未設定。
  テキスト整列：センター;
}

.slide画像{
  高さ：230rpx。
  幅：526rpx。
  国境半径：10rpx。
  ボックスシャドウ：0PX 3px 10pxの0PX RGBA（51、51、51、0.3）。
  マージン：0 RPX 30rpx。
  Zインデックス：1。
}

.active {
  変換：スケール（1.21）;
  トランジション：すべての0.2秒は、使いやすさに0;
  z屈折率：20。
}

JS

  swiperChange（E）{
    この=定数;
    that.setData（{
      swiperIndex：e.detail.current、
    }）
  }、