WeChat ミニプログラムの例: 3D カルーセル特殊効果コードの実装

不言

リリース： 2018-08-29 09:46:25

オリジナル

8485 人が閲覧しました

この記事では、WeChat アプレットの例を紹介します。3D カルーセル特殊効果を実装するコードです。必要な方は参考にしていただければ幸いです。

WeChat アプレットを作成するときに、3D カルーセル画像を実現する効果について書きました。WeChat アプレットに付属するコンポーネントスワイパーを直接使用して実現できます。効果の図は次のとおりです。

WeChat ミニプログラムの例: 3D カルーセル特殊効果コードの実装

1. スワイパーの関連属性

indicator-dots 小さなドットを表示するかどうか、小さなドットを自分でリセットすることもできます

circular 無限スクロールを実現するためのスライディングを接続するかどうか

previous-margin と前の画像間の距離

next -marginと次の画像間の距離

autoplayは自動スクロールを実現します

ここでは主にcircularを使用して無限スクロールを実現し、前後の間隔を追加し、レベルと画像の透明度は、画像とコンテナの高さを変更することで実現できます。設定が完了したら、ほぼ準備完了です

wxml ファイル

<!--carousel/index.wxml-->
<swiper>
  <block>
    <swiper-item>
      <image></image>
    </swiper-item>
  </block>
</swiper>

ログイン後にコピー

wxss ファイル

/* carousel/index.wxss */
page{
  background: #f7f7f7f7;
}
.imageContainer{
  width: 100%;
  height: 500rpx;
  background: #000;
}
.item{
  height: 500rpx;
}
.itemImg{
  position: absolute;
  width: 100%;
  height: 380rpx;
  border-radius: 15rpx;
  z-index: 5;
  opacity: 0.7;
  top: 13%;
}
.active{
  opacity: 1;
  z-index: 10;
  height: 430rpx;
  top: 7%;
  transition:all .2s ease-in 0s;
}

ログイン後にコピー

JS ファイル

// carousel/index.js
Page({

  data: {
    currentIndex: 0
  },

  onLoad: function (options) {
  
  },
  /* 这里实现控制中间凸显图片的样式 */
  handleChange: function(e) {
    this.setData({
      currentIndex: e.detail.current
    })
  },
})

ログイン後にコピー