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 サイトを展開します (推奨)

推薦する

VMware Workstation のインストール Linux システム

始める段階から初心者になるまで、Linux オペレーティング システムは不可欠です。最初のステップは...

Vue 組み込みコンポーネントのキープアライブでの LRU アルゴリズムの使用

目次Vue の keep-alive 組み込みコンポーネントの使用でもこのアルゴリズムが使用されます...

Mysql インデックスと Redis ジャンプテーブルについての簡単な説明

まとめインタビュー中、MySQL インデックスの問題について議論しているときに、B+ ツリー、B ツ...

CenterOS7 インストールおよび構成環境 jdk1.8 チュートリアル

1. まずcenterosに付属のJDKをアンインストールします rpm-qa|grepopenjd...

MySQL でストアド プロシージャを作成し、データ テーブルに新しいフィールドを追加する方法の分析

この記事では、例を使用して、MySQL でストアド プロシージャを作成し、データ テーブルに新しいフ...

CSS3 引用のソースと出典をマークする方法

疫病のせいで家にこもりきりで、頭がおかしくなりそうなので、パソコンを起動して頭を働かせてみました。今...

Apache Bench で Web ストレス テストを実装する方法

1. Apache Benchの紹介ApacheBench は、Apache サーバーに付属する W...

CentOS7 64ビットインストールmysqlグラフィックチュートリアル

MySQL をインストールするための前提条件: CentOS 7 64 ビットをインストールし、Ce...

Ubuntu 18.04 での Pycharm インストール チュートリアルの実装

方法1: Pycharmをダウンロードしてインストールするダウンロードアドレス: https://w...

Chromeの最小フォントサイズ制限12pxに対する最終的な解決策

ウェブサイトを作成するユーザーの多くが、このような問題に遭遇すると思います。Chrome のデフォル...

Linuxシステムにmsfをインストールするプロセスの詳細な説明

または、インストールプロセスを自分で書き留めてください。私のサーバーシステムはAliyun Linu...

Vueは州、都市、地区のカスケード選択を実現します

最近、省、市、地区のカスケード選択効果を実装する必要があります。省、市、地区のデータはすべてローカル...

TCPパフォーマンスチューニングの実装原理とプロセス分析

3ウェイハンドシェイクフェーズクライアントSYNパケットの再試行回数sysctl -w net.ip...

Linux での MySQL データベースのマスター スレーブ同期レプリケーション構成

Linux での MySQL データベースのマスター/スレーブ同期構成の利点は、この方法をバックアッ...

WeChatアプレットでSVGアイコンを使用する方法

SVG は、さまざまな利点があるため、近年広く使用されています。残念ながら、WeChat ミニプログ...