vue+rem カスタムカルーセル効果

vue+rem カスタムカルーセル効果

vue+remを使用したカスタムカルーセルチャートの実装は参考までに。具体的な内容は以下のとおりです。

ページレイアウトの単位は rem です。カルーセル全体の幅を動的に計算する場合、px を rem に変換する必要があり、かなり面倒です。

効果は次のようになります: 現在の画像が最初の画像でも最後の画像でもない場合は、現在の画像の前の画像と次の画像の一部だけが表示されます。

具体的なコードは以下のとおりです

<テンプレート>
    <div class="constructionUp">
        <div class="pub-hd">
            <h2>建設アップグレードパッケージ</h2>
            <h3>追加サービス</h3>
        </div>
        <div id="アクティビティDiv">
            <ul num="0" id="アクティビティUl">
               <li class="activityLi" v-for="(v,i) in listData" :key="i" @touchstart.capture="touchStart" @touchend.capture="touchEnd">
                    <img src="static/imgs/package/bitmap.jpg">
                    <div class="liText">
                        <p class="liTtitle">{{v.lititle}}</p>
                        <p class="liDes">1. 工事開始後、顧客、設計者、プロジェクト マネージャーが現場でブリーフィングを実施します。個別のプロジェクト変更がある場合は、通常の顧客変更手順に従います (「顧客変更通知」を参照)。</p>
                        <p class="liDes">2. ブリーフィング後、お客様が何らかの理由でカスタマイズプロジェクトの変更を要求した場合、カスタマイズプロジェクトの費用負担に加えて、追加の振込手数料も支払う必要があります。 </p>
                         <p class="liPrice">
                            <span class="title1">テーマパッケージ価格:¥</span>
                            <span class="title2">4500</span>
                            <span class="title3">元</span>
                        </p>
                    </div>
                </li>
            </ul>
            <div class="pointerDiv">
                <span :class="[currantIndex ===0 ? 'active' : '', 'pointer']"></span>
                <span :class="[currantIndex ===1 ? 'active' : '', 'pointer']"></span>
                <span :class="[currantIndex ===2 ? 'active' : '', 'pointer']"></span>
            </div>
        </div>
    </div>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
    データ () {
        戻る {
            listData: [{lititle: '古民家リノベーション'}, {lititle: '古民家リノベーション2'}, {lititle: '古民家リノベーション3'}],
            li幅: 0,
            数値: 0,
            開始X: 0,
            終了X: 0,
            カレントインデックス: 0,
            テスト: 偽
 
        }
    },
    マウントされた(){
        this.initUlWidth()
    },
    メソッド: {
        initUlWidth () { // ulの幅を初期化します let pit = document.documentElement.clientWidth / 750 // 現在の携帯電話の画面と750画面の比率 let oldWidth = document.getElementsByClassName('activityLi')[0].offsetWidth // 1つのliの幅 let marginR = getComputedStyle(document.getElementsByClassName('activityLi')[0], null)['marginRight'] // pxで1つのmarginRightを取得します
            marginNum = parseInt(marginR.replace('px', '')) とします。
            this.liWidth = oldWidth + marginNum // シングル幅 + maringRight
            let liCount = parseInt(document.getElementsByClassName('activityLi').length)// li の数 this.liNum = liCount
            let ULpx = oldWidth * liCount + (liCount - 1) * marginNum // 最後の余白はカウントされません document.getElementById('activityUl').style.width = ULpx / pit + 'px' // 現在の div の幅がデザイン比率の 2 倍になるように比率で割り、ul の長さを設定します。最後の余白はカウントされません },
        タッチスタート(e){
            // 初期位置を記録します e.preventDefault() // デフォルトのイベント、スクロールなどを防止します this.startX = e.touches[0].clientX // スライドが開始される位置を記録します },
        タッチエンド(e){
            e.preventDefault() // デフォルトイベントを防止する // 終了位置を記録する this.endX = e.changedTouches[0].clientX
            // 左にスワイプ if (this.startX - this.endX > 30) {
                console.log('左にスワイプ')
                (this.currantIndex >= this.liNum - 1)の場合{
                    // 何もしない } else {
                    this.currantIndex++
                    document.getElementById('activityUl').style.left = -this.currantIndex * this.liWidth + 'px'
                }
            }
            // 右にスワイプ if (this.startX - this.endX < -30) {
                (this.currantIndex === 0)の場合{
                    // 何もしない } else {
                    this.currantIndex--
                    document.getElementById('activityUl').style.left = -this.currantIndex * this.liWidth + 'px'
                }
            }
            this.startX = 0
            this.endX = 0
        }
 
    }
}
</スクリプト>
 
<style lang="less" スコープ>
    @import "~less/base.less";
    .constructionUp{
        幅: 100%;
        .pub-hd{
            パディング: 0.8rem 0 0.6rem 0;
            テキスト配置: 中央;
            背景色: #ffffff;
            h2{
                フォントサイズ: 0.32rem;
                色: #606771;
            }
            h3{
                上マージン: 0.26rem;
                フォントサイズ: 0.24rem;
                色: #b9bec4;
            }
        }
        #アクティビティDiv{
            左パディング: 0.4rem;
            背景色: #ffffff;
            オーバーフロー: 非表示;
            #アクティビティUl{
                位置: 相対的;
                左: 0;
                高さ:8.06rem;
                遷移:すべて .35 秒のイーズインアウト;
                背景色: #ffffff;
                .アクティビティLi{
                    フロート: 左;
                    幅: 6.7rem;
                    高さ:8.06rem;
                    &:not(:最後の子){
                        右マージン: 0.3rem;
                    }
                    ボックスの影: 0 5px 25px 0 rgba(0,0,0,.4);
                    画像{
                        幅: 100%;
                        高さ:3.6rem;
                    }
                    .liText{
                        パディング: 0 0.4rem;
                        テキスト配置: 左;
                        .liTtitle{
                            パディング: 0.48rem 0 0.36rem 0;
                            フォントサイズ: 0.34rem;
                            色: #000000;
                        }
                        .liDes{
                            フォントサイズ: 0.2rem;
                            色:#b5b5b5;
                        }
                    }
                    .li価格{
                        高さ: 0.28rem;
                        行の高さ: 0.28rem;
                        color: @c-main; //色を変更するだけです vertical-align: bottom;
                        上マージン: 0.8rem;
                        .title1{
                            表示: インラインブロック;
                            フォントサイズ: 0.22rem;
                        }
                         .title2{
                              表示: インラインブロック;
                              フォントサイズ: 0.35rem;
                        }
                         .title3{
                              表示: インラインブロック;
                              フォントサイズ: 0.22rem;
                        }
                    }
                }
            }
             .ポインタDiv{
                幅: 100%;
                高さ:1.54rem;
                背景色: #ffffff;
                ディスプレイ: フレックス;
                アイテムの位置を中央揃えにします。
                コンテンツの中央揃え: 中央;
                .ポインタ{
                    表示: インラインブロック;
                    幅: 0.16rem;
                    高さ: 0.16rem;
                    背景色: #cccccc;
                    境界線の半径: 100%;
                    &:n番目の子(2){
                        マージン:0 0.4rem;
                    }
                    &。アクティブ{
                        背景色: @c-main;
                    }
                }
            }
        }
    }
</スタイル>

vue.js コンポーネントのチュートリアルについては、特別な vue.js コンポーネント学習チュートリアルをクリックして学習してください。

Vue 学習チュートリアルの詳細については、特別トピック「Vue 実践チュートリアル」をお読みください。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue3.0 手書きカルーセル効果
  • Vue3でカルーセルコンポーネントをカプセル化する方法
  • uniapp vue および nvue カルーセル コンポーネントのサンプル コード

<<:  一定期間の日ごと、時間ごとの統計データを取得するMySQLの詳しい説明

>>:  tomcat をインストールし、Linux で Web サイトを展開します (推奨)

推薦する

Yahooが開発したウェブページスコアリングプラグインYSlowのスコアリングルール

YSlow は、Yahoo USA が開発したページ スコアリング プラグインです。非常に優れていま...

Windows 上の MySQL バージョン 5.7 でエンコードを UTF-8 に変更する方法

序文MySQLの勉強を始めたばかりで、公式サイトから最新バージョン5.7.14をダウンロードしました...

MySQL に外部キー制約を追加する具体的な方法

このチュートリアルの動作環境: Windows 7 システム、MySQL 8 バージョン、Dell ...

シンプルなカルーセル効果を実現するネイティブ js

この記事では、シンプルなカルーセル効果を実現するためのjsの具体的なコードを参考までに紹介します。具...

MySQL でのワイルドカードを使用したファジークエリの実装に関する簡単な説明

MySQL データベースでは、あいまいクエリが必要な場合にワイルドカードを使用します。まず、演算子と...

特殊効果メッセージボックスを実現するネイティブJS

この記事では、ネイティブ JS で実装された特殊効果メッセージ ボックスを紹介します。効果は次のとお...

mysql 変数の使用例の分析 [システム変数、ユーザー変数]

この記事では、例を使用して MySQL 変数の使用方法を説明します。ご参考までに、詳細は以下の通りで...

一目でわかる$nextTickの説明

目次1. 機能説明2. 親コンポーネント3. サブコンポーネント NextTick.vue 4なぜ未...

mysql 5.7.5 m15 winx64.zip インストール チュートリアル

win7 64 ビットで mysql-5.7.5-m15-winx64 をインストールして構成する方...

CentOS7 デプロイメント Flask (Apache、mod_wsgi、Python36、venv)

1. Apacheをインストールする # yum インストール -y httpd httpd-de...

HTML/CSS での空白処理とページ内の空白を保持する方法

HTML の空白ルールHTML では、コンテンツ内の複数のスペースは通常 1 つとみなされ、連続する...

VMware 仮想マシンでの Centos8 ブリッジの静的 IP 設定方法

1. ネットワーク接続方法がブリッジされていることを確認する物理ネットワーク接続ステータスのコピーを...

Tencent Cloud Server Tomcat ポートにアクセスできない場合の解決策

最近、Tencent Cloudを使用してサーバーを設定しました。使用中に、tomcatポートにアク...

シンプルで簡単なJavaScript開発のためのSvelte実装原理の詳細な説明

目次デモ1フラグメントの作成スヴェルトコンポーネント状態を変更できるデモSvelte は長い間存在し...

MySQL ユーザーのホスト属性を素早く変更する方法

MySQL にリモートでログインする場合、使用するアカウントには特別な要件があります。アカウントのデ...