目的カルーセルコンポーネントをカプセル化して直接使用します。具体的な内容は以下のとおりです。 一般的な手順
着陸コード1. 梱包部品 <テンプレート> <div class="my-carousel" @mouseenter="stop" @mouseleave="start"> <ul class="carousel-body"> <li v-for="(item, i) in findBannerList" :key="item.id" class="carousel-item" :class="{ fade: index === i }"> <ルーターリンク先="/"> <img :src="item.imgUrl" alt="画像" /> </ルーターリンク> </li> </ul> <a @click="clickFn(-1)" href="javascript:;" class="carousel-btn prev"><i class="iconfont icon-angle-left"></i></a> <a @click="clickFn(1)" href="javascript:;" class="carousel-btn next"><i class="iconfont icon-angle-right"></i></a> <div class="carousel-indicator"> <span @click="active(i)" v-for="(item, i) in findBannerList" :key="i" :class="{ active: index === i }"></span> </div> </div> </テンプレート> <スクリプト> 'vue' から { onUnmounted, ref, watch } をインポートします。 エクスポートデフォルト{ 名前:「カルーセル」 小道具: { バナーリストを検索: { タイプ: 配列、 デフォルト: () => [] }, 自動再生: タイプ: ブール値、 デフォルト: true }, 間隔: { タイプ: 数値、 デフォルト: 3 } }, セットアップ(プロパティ) { 定数インデックス = ref(0) // 定数ストレージタイマーを定義する const timer = ref(null) // 自動カルーセル効果を実現するためのタイマーメソッド const autoplayFn = () => { // タイマーの多重トリガーを防ぐための手ぶれ防止 clearInterval(timer.value) タイマー値 = setInterval(() => { インデックス値 += 1 if (index.value >= props.findBannerList.length) { インデックス値 = 0 } }, props.duration * 1000) } // リスナーは、インターフェースによって返されたデータと渡された関連属性パラメータに従って、カルーセルの自動再生を開始します // 返されたデータの長さをリッスンし、長さが 1 より大きく、自動再生が true の場合、カルーセルを開始します watch( () => props.findBannerList、 () => { props.findBannerList.length > 1 && props.autoplay) の場合 { 自動再生関数() } } ) // 自動再生を停止するには、マウスをカルーセル内に移動してください const stop = () => { if (timer.value) clearInterval(timer.value) } // マウスをカルーセルの外に移動してタイマーを開始します const start = () => { props.findBannerList.length > 1 && props.autoplay) の場合 { 自動再生関数() } } // カルーセルを切り替えるには、カルーセルの左ボタンと右ボタンをクリックします。渡されたパラメータによって、カルーセルが左に移動するのか右に移動するのかが決まります。const clickFn = e => { インデックス値 += e if (index.value >= props.findBannerList.length) { インデックス値 = 0 } インデックス値 < 0 の場合 { インデックス値 = props.findBannerList.length - 1 } } // インジケーター(カルーセルの下の小さな点)をクリックしてカルーセルを切り替えます const active = e => { インデックス値 = e } // パフォーマンスの低下を避けるためにコンポーネントが破棄されるときのラブレタータイマー onUnmounted(() => { if (timer.value) clearInterval(timer.value) }) 戻り値: { インデックス、停止、開始、クリックFn、アクティブ } } } </スクリプト> <style スコープ lang="less"> .my-carousel { 幅: 100%; 高さ: 100%; 最小幅: 300px; 最小高さ: 150px; 位置: 相対的; .カルーセル{ &-体 { 幅: 100%; 高さ: 100%; } &-アイテム { 幅: 100%; 高さ: 100%; 位置: 絶対; 左: 0; 上: 0; 不透明度: 0; 遷移: 不透明度 0.5 秒線形; &.フェード{ 不透明度: 1; zインデックス: 1; } 画像 { 幅: 100%; 高さ: 100%; } } &-インジケータ { 位置: 絶対; 左: 0; 下: 20px; zインデックス: 2; 幅: 100%; テキスト配置: 中央; スパン { 表示: インラインブロック; 幅: 12px; 高さ: 12px; 背景: rgba(0, 0, 0, 0.2); 境界線の半径: 50%; カーソル: ポインタ; ~ スパン { 左マージン: 12px; } &。アクティブ { 背景: #fff; } } } &-btn { 幅: 44px; 高さ: 44px; 背景: rgba(0, 0, 0, 0.2); 色: #fff; 境界線の半径: 50%; 位置: 絶対; 上: 228px; zインデックス: 2; テキスト配置: 中央; 行の高さ: 44px; 不透明度: 0; 遷移: すべて 0.5 秒; &.前へ { 左: 20px; } &。次 { 右: 20px; } } } &:ホバー{ .carousel-btn { 不透明度: 1; } } } </スタイル> 2. プラグインへのパッケージ化 './my-carousel.vue' から MyCarousel をインポートします。 エクスポートデフォルト{ インストール(アプリ) { app.component(MyCarousel.name、MyCarousel) } } 3. エントリファイル main.js でのグローバル登録 'vue' から {createApp} をインポートします。 './App.vue' からアプリをインポートします。 './components/library' から MyUI をインポートします。 // プラグインを使用するには、main.js で app.use(plugin) を使用します createApp(App).use(MyUI).mount('#app') 4. プロジェクトでコンポーネントを使用する ホームバナーコンポーネントを準備し、my-carouselコンポーネントを使用して、プロジェクトでカルーセルが使用されるホームバナーコンポーネントを導入します。ホームバナーコンポーネントでは、次のパラメータを設定できます。 findBannerListパラメータは、コンポーネントに渡されるバックグラウンドリクエストデータとして使用されます。 自動再生パラメータがカルーセルを有効にするかどうか。デフォルト値は true です。カルーセルを有効にします。 期間パラメータは、カルーセルの時間間隔(秒単位)です。 <テンプレート> <div class="home-banner"> <MyCarousel :findBannerList="findBannerList" :autoplay="true" :duration="3" /> </div> </テンプレート> 要約するアイデアと手順に従い、段階的に実装するだけです。 1. 基本的なコンポーネントの分割とレイアウト 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: springcloud alibaba nacos linux 設定の詳細なチュートリアル
>>: MySQL で削除されたレコードが有効にならない理由のトラブルシューティング
ケースの説明: - ページ効果を実現するためにテーブルを使用する- ハイパーリンクを機能させたくない...
1. イメージをプルするまず、次のコマンドを実行して、イメージをローカル コンピューターにダウンロー...
以前、raspbian で実行したときに opencv の一部の依存関係をパッケージ化できず、一部の...
目次序文参考比較手動比較浅い比較徹底比較要約する序文JavaScript でプリミティブ値を比較する...
開発の背景:最近、私はバッチ データを MySQL データベースにインポートする機能に取り組んでいま...
【質問】 INSERT 文は最も一般的な SQL 文の 1 つです。最近、MySQL サーバーが同時...
この記事では、チャット機能を実現するためのVue+express+Socketの具体的なコードを参考...
前回の記事では、Docker を使用して Laravel アプリケーションをデプロイする方法について...
目次1. リテラル1.1 数値リテラル1.2 浮動小数点リテラル1.3 特別な値1.4 文字列リテラ...
ミニプログラムはユーザーの個人情報を収集してアップロードしましたが、拒否されました。こんにちは、ミニ...
目次序文プロジェクト設計後部フロントエンドプロジェクトを実行する質疑応答序文これまでの API 開発...
導入実稼働環境では、データの損失を回避するために、通常、データベースは定期的にバックアップされます。...
図書館運営クエリ1.SHOW DATABASE; ----すべてのデータベースを照会する2. SHO...
Windows Server 2019 は、Microsoft が公式にリリースした最新のサーバー...
2つの小さな問題ですが、長い間私を悩ませていました。最初の質問テキストエリアの左側のテキストは常にテ...