WeChatアプレットのスクロールビューが左右の連動を実現

_this = this とします。
_this.mapCtx = wx.createMapContext("myMap");
        // APIコアクラスをインスタンス化します qqmapsdk = new QQMapWX({
            キー: MAP_KEY、
        });
 
        // 全国の都市リストを取得する qqmapsdk.getCityList({
            成功: 関数 (res) {
                リストをres.result[0].concat(res.result[1], res.result[2])とします。
                _this.allCity = リスト;
                _this.cityList = _this.pySegSort(リスト);
            },
            失敗: 関数 (エラー) {
                コンソールエラー(エラー);
            },
            完了: 関数 (res) {
                コンソールログ(res);
            },
        });
 
        pySegSort(arr) {
            if (!String.prototype.localeCompare) が null を返す;
            文字を "*ABCDEFGHJKLMNOPQRSTWXYZ" とします。split("");
            let zh = "これは非常にシンプルでエレガントな文です。ここに書き留めておきます。私は...
            セグメントを [] とします。
            電流を流す;
            文字.forEach(関数(項目, i) {
                curr = { 文字: アイテム、 ID: アイテム、 データ: [] };
                arr.forEach(関数 (item2) {
                    もし （
                        (!zh[i - 1] || zh[i - 1].localeCompare(item2.fullname) <= 0) &&
                        項目2.fullname.localeCompare(zh[i]) == -1
                    ）{
                        curr.data.push(item2);
                    }
                });
                （通貨データの長さ）の場合{
                    curr.data.sort(関数(a, b) {
                        a.fullname.localeCompare(b.fullname) を返します。
                    });
                    segs.push(curr);
                }
            });
            セグメントを返します。
        },

// 人気の都市ボックスの高さを取得します。let query = wx.createSelectorQuery().in(this);
        クエリ
            .select(".hot-city")
            .boundingClientRect((データ) => {
                高さ = データ。
            })
            .exec();
 
        
        // 各文字カテゴリのブロックの高さを取得します setTimeout(() => {
            クエリを wx.createSelectorQuery().in(this); にします。
            クエリ
                .selectAll(".cityList")
                .boundingClientRect((データ) => {
                    console.log(data, "各都市の分類の高さ");
                    this.letterBoxHeight = データ;
                    this.heightArr = this.getHeight();
                })
                .exec();
        }, 1000); // 非同期取得にはsetTimeoutを使用します。そうしないと取得できません // 各エリアの高さを計算します getHeiht() {
            n = this.hotCityHeight とします。
            arr = [] とします。
            this.letterBoxHeight.forEach((item) => {
                n = n + アイテムの高さ;
 
                arr.push(n);
            });
            arr を返します。
        },

// 右側の文字をクリックします letterClick(letter, i) {
            this.letterIndex = i;
            this.currentIndex = i;
            this.childViewId = 文字;
            タイムアウトを設定する(() => {
                this.letterIndex = -1;
            }, 500); // 最初の円は0.5秒後に消えます},

インデックスを計算します(arr, スクロールの高さ) {
   インデックスを "" にします。
   (i = 0 とします; i < arr.length; i++) {
                スクロール高さ >= this.hotCityHeight && スクロール高さ < arr[0]) {
                    インデックス = 0;
                } そうでない場合 (スクロール高さ >= arr[i - 1] && スクロール高さ < arr[i]) {
                    インデックス = i;
                }
            }
            インデックスを返します。
        },
        // スクロール距離を計算する scroll(e) {
            scrollTop を e.detail.scrollTop にします。
            scrollArr = this.heightArr; とします。
            index = this.calculateIndex(scrollArr, scrollTop); とします。
            this.currentIndex = インデックス;
        },

作成された() {
        _this = this とします。
        _this.mapCtx = wx.createMapContext("myMap");
        // APIコアクラスをインスタンス化します qqmapsdk = new QQMapWX({
            キー: MAP_KEY、
        });
 
        // 全国の都市リストを取得する qqmapsdk.getCityList({
            成功: 関数 (res) {
                リストをres.result[0].concat(res.result[1], res.result[2])とします。
                _this.allCity = リスト;
                _this.cityList = _this.pySegSort(リスト);
            },
            失敗: 関数 (エラー) {
                コンソールエラー(エラー);
            },
            完了: 関数 (res) {
                コンソールログ(res);
            },
        });
    },
    マウント() {
        // 人気の都市ボックスの高さを取得します。let query = wx.createSelectorQuery().in(this);
        クエリ
            .select(".hot-city")
            .boundingClientRect((データ) => {
                高さ = データ。
            })
            .exec();
 
       
        // 各文字カテゴリのブロックの高さを取得します setTimeout(() => {
            クエリを wx.createSelectorQuery().in(this); にします。
            クエリ
                .selectAll(".cityList")
                .boundingClientRect((データ) => {
                    console.log(data, "各都市の分類の高さ");
                    this.letterBoxHeight = データ;
                    this.heightArr = this.getHeight();
                })
                .exec();
        }, 1000);
    },
    メソッド: {
        // 都市リストをアルファベット順に並べ替える pySegSort(arr) {
            if (!String.prototype.localeCompare) が null を返す;
            文字を "*ABCDEFGHJKLMNOPQRSTWXYZ" とします。split("");
            let zh = "これは非常にシンプルでエレガントな文です。ここに書き留めておきます。私は...
            セグメントを [] とします。
            電流を流す;
            文字.forEach(関数(項目, i) {
                curr = { 文字: アイテム、 ID: アイテム、 データ: [] };
                arr.forEach(関数 (item2) {
                    もし （
                        (!zh[i - 1] || zh[i - 1].localeCompare(item2.fullname) <= 0) &&
                        項目2.fullname.localeCompare(zh[i]) == -1
                    ）{
                        curr.data.push(item2);
                    }
                });
                （通貨データの長さ）の場合{
                    curr.data.sort(関数(a, b) {
                        a.fullname.localeCompare(b.fullname) を返します。
                    });
                    segs.push(curr);
                }
            });
            セグメントを返します。
        },
        // 右側の文字をクリックします letterClick(letter, i) {
            this.letterIndex = i;
            this.currentIndex = i;
            this.childViewId = 文字;
            タイムアウトを設定する(() => {
                this.letterIndex = -1;
            }, 500);
        },
        // 各エリアの高さを計算する getHeiht() {
            n = this.hotCityHeight とします。
            arr = [] とします。
            this.letterBoxHeight.forEach((item) => {
                n = n + アイテムの高さ;
 
                arr.push(n);
            });
            arr を返します。
        },
        インデックスを計算します(arr, スクロールの高さ) {
            インデックスを "" にします。
            (i = 0 とします; i < arr.length; i++) {
                スクロール高さ >= this.hotCityHeight && スクロール高さ < arr[0]) {
                    インデックス = 0;
                } そうでない場合 (スクロール高さ >= arr[i - 1] && スクロール高さ < arr[i]) {
                    インデックス = i;
                }
            }
            インデックスを返します。
        },
        // スクロール距離を計算する scroll(e) {
            scrollTop を e.detail.scrollTop にします。
            scrollArr = this.heightArr; とします。
            index = this.calculateIndex(scrollArr, scrollTop); とします。
            this.currentIndex = インデックス;
        },
}

<スクロールビュー scroll-y スタイル="高さ: 1400rpx" :scroll-into-view="childViewId" @scroll="スクロール">
            <!-- 人気の都市 -->
            <view class="hot-city">
                <p>人気の都市</p>
                <ul>
                    <li
                        v-for="(item, idx) が hotCityList 内"
                        :key="idx​​"
                        :class="fixedPosition === 項目 ? '選択済み' : ''"
                        @click="都市を選択(項目)"
                    >
                        {{ アイテム }}
                    </li>
                </ul>
            </ビュー>
            <!-- アルファベット順リスト -->
            <view class="letterAz">
                <表示
                    v-for="(item, idx) in letterAz"
                    :key="idx​​"
                    クラス="文字項目"
                    :class="currentIndex === idx ? '選択済み' : ''"
                    @click="letterClick(item, idx)"
                >
                    {{ アイテム }}
                    <view v-show="letterIndex === idx" class="pop-item">{{ item }}</view>
                </ビュー>
            </ビュー>
            <!-- 都市のリスト -->
            <view v-for="(item, idx) in cityList" :key="idx​​" class="cityList">
                <view :id="item.id" class="city-letter">{{ item.letter }}</view>
                <view v-for="ele in item.data" :key="ele.id" class="city-name" @click="selectCity(ele.fullname)">{{
                    要素のフルネーム
                } } } 表示>
            </ビュー>
</スクロールビュー>

// 人気の city.hot-city {
    パディング: 38rpx 32rpx;
    ｐ {
        フォントサイズ: 28rpx;
        行の高さ: 40rpx;
        色: #999999;
        下部マージン: 32rpx;
    }
    ul {
        ディスプレイ: フレックス;
        flex-wrap: ラップ;
        & li {
            背景: rgba(0, 0, 0, 0.04);
            境界線の半径: 16rpx;
            フォントサイズ: 28rpx;
            色: #000000;
            テキスト配置: 中央;
            マージン: 8rpx;
            パディング: 16rpx 46rpx;
        }
        & li.selected {
            背景: rgba(45, 200, 77, 0.12);
            境界線: 0.66rpx 実線 #046a38;
            色: #046a38;
        }
    }
}
// アルファベットリスト.letterAz {
    位置: 固定;
    右: 29rpx;
    上: 380rpx;
    フォントサイズ: 20rpx;
    行の高さ: 28rpx;
    色: rgba(0, 0, 0, 0.55);
    .letter-item {
        位置: 相対的;
        上マージン: 4rpx;
        .pop-item {
            位置: 絶対;
            右: 165%;
            下部: -100%;
            幅: 96rpx;
            高さ: 96rpx;
            背景: #ffffff;
            境界線: 0.66rpx 実線 rgba(0, 0, 0, 0.12);
            ボックスのサイズ: 境界線ボックス;
            ボックスの影: 0 10rpx 24rpx rgba(0, 0, 0, 0.08);
            境界線の半径: 100%;
            テキスト配置: 中央;
            行の高さ: 96rpx;
            フォントサイズ: 40rpx;
            色: rgba(0, 0, 0, 0.85);
        }
    }
    .letter-item.selected {
        色: #046a38;
    }
}
// 都市リスト.cityList {
    左マージン: 32rpx;
    右マージン: 66rpx;
    上マージン: 20rpx;
    .city-letter {
        フォントサイズ: 28rpx;
        行の高さ: 40rpx;
        色: #999999;
    }
    .都市名 {
        フォントサイズ: 28rpx;
        行の高さ: 40rpx;
        色: #000000;
        パディング: 32rpx 0;
        下境界線: 2rpx 実線 rgba(0, 0, 0, 0.12);
    }
}