目的カルーセルコンポーネントをカプセル化して直接使用します。具体的な内容は以下のとおりです。 一般的な手順
着陸コード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 で削除されたレコードが有効にならない理由のトラブルシューティング
私はここでCentOS 7 64ビットシステムを使用しています。CentOS 64ビットシステムを試...
目次1. 準備2. 減圧3. 統合を開始する1. 準備Ckeditor_4.5.7_full + C...
目次1. はじめに2. GitHub 3. 基本構成プロジェクトディレクトリパッケージ.json c...
目次1. データベースの制約1.1 はじめに1.2 制約の種類1.3 ヌルでない1.4 ユニーク1....
CSS 要素内の計算されたスタイル (つまり、カスケード後の最終的なスタイル) を取得するには、W3...
上の境界線のみを表示する <table frame=above>下の境界線のみを表示する...
目次1 概念上の区別2 事例紹介3 クエリパフォーマンス4 アップデートのパフォーマンス4.1 記憶...
目次実際の戦闘プロセスまずは主なコマンドと詳細を一つずつ説明しましょう起動が成功したかどうかを確認す...
マウスをドラッグしてページのスクリーンショットを撮ります(指定した領域にスクリーンショットをドラッグ...
目次背景:必要:効果1. アイデア2. 実装1. ページとスタイル2. 初期化3. クリックすると4...
システムバージョン [root@ ~]# cat /etc/redhat-release CentO...
Excel のエクスポートは、docker 環境では常に失敗します。最も直接的な原因は、中国語フォン...
序文今日、自作のコンポーネントを使っていたところ、突然、長い間忘れていたバブリングイベントに遭遇しま...
概要ボリュームは、さまざまなストレージ リソースを抽象化および仮想化したものです。ストレージ リソー...
目次1. キャラクター機能1. ケースコントロール機能2. キャラクターコントロール機能2. 数学関...