ホームページ >WeChat アプレット >ミニプログラム開発 >WeChat ミニ プログラムの例: 3D カルーセル特殊効果コードの実装
この記事では、WeChat アプレットの例を紹介します。3D カルーセル特殊効果を実装するコードです。必要な方は参考にしていただければ幸いです。
WeChat アプレットを作成するときに、3D カルーセル画像を実現する効果について書きました。WeChat アプレットに付属するコンポーネント スワイパーを直接使用して実現できます。効果の図は次のとおりです。
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 }) }, })
関連する推奨事項:
WeChat miniプログラムカルーセルチャート関数開発例WeChatミニプログラム完成カルーセルチャートエフェクトの共有例以上がWeChat ミニ プログラムの例: 3D カルーセル特殊効果コードの実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。