vue+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;
                    }
                }
            }
        }
    }
</スタイル>