城市列表模板

<template>
    <view class="introScroll">
        <!-- 右侧字母 -->
        <view class="city_right">
            <text class="letter_item" v-for="(item, index) in letter" :key="index" @tap.stop="letterTap(index)">{{ item }}</text>
        </view>
        <scroll-view scroll-with-animation="true" class="cityListView" scroll-y="true" :scroll-into-view="scrollId">
            <!-- 城市列表 -->
            <view class="forCityView">
                <view class="forCityItem" v-for="(item, index) in allCityList" :key="index">
                    <view v-if="item.show" :id="item.letter" class="letterItemFirst">{{ item.letter }}</view>
                    <view @click="cityItemClick(index)" class="itemCityContent">
                        {{ item.city }}
                        <view class="line"></view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            letter: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
            //滑动到指定位置
            scrollId: '',
            allCityList: [],
            //动画
            animation: {},

//模拟数据
            list: [
                {
                    city: '阿拉善盟',
                    letter: 'A',
                },
                {
                    city: '阿拉善',
                    letter: 'A',
                },
                {
                    city: '鞍山',
                    letter: 'A',
                },
                {
                    city: '安庆',
                    letter: 'A',
                },
                {
                    city: '安阳',
                    letter: 'A',
                },
                {
                    city: '阿坝',
                    letter: 'A',
                },
                {
                    city: '安顺',
                    letter: 'A',
                },
                {
                    city: '阿里',
                    letter: 'A',
                },
                {
                    city: '安康',
                    letter: 'A',
                },
                {
                    city: '阿克苏',
                    letter: 'A',
                },
                {
                    city: '阿勒泰',
                    letter: 'A',
                },
                {
                    city: '澳门',
                    letter: 'A',
                },
                {
                    city: '北京',
                    letter: 'B',
                },
                {
                    city: '保定',
                    letter: 'B',
                },
                {
                    city: '包头',
                    letter: 'B',
                },
                {
                    city: '巴彦淖尔',
                    letter: 'B',
                },
                {
                    city: '巴彦淖尔盟',
                    letter: 'B',
                },
                {
                    city: '巴彦浩特',
                    letter: 'B',
                },
                {
                    city: '本溪',
                    letter: 'B',
                },
                {
                    city: '白山',
                    letter: 'B',
                },
                {
                    city: '白城',
                    letter: 'B',
                },
                {
                    city: '蚌埠',
                    letter: 'B',
                },
                {
                    city: '亳州',
                    letter: 'B',
                },
                {
                    city: '滨州',
                    letter: 'B',
                },
                {
                    city: '北海',
                    letter: 'B',
                },
                {
                    city: '百色',
                    letter: 'B',
                },
                {
                    city: '巴中',
                    letter: 'B',
                },
                {
                    city: '毕节',
                    letter: 'B',
                },
                {
                    city: '保山',
                    letter: 'B',
                },
                {
                    city: '版纳',
                    letter: 'B',
                },
                {
                    city: '宝鸡',
                    letter: 'B',
                },
                {
                    city: '白银',
                    letter: 'B',
                },
                {
                    city: '博尔塔拉',
                    letter: 'B',
                },
                {
                    city: '巴音郭楞',
                    letter: 'B',
                },
            ],
        }
    },
    onLoad() {
        this.formatCityData(this.list)
    },
    methods: {
        //字母点击事件
        letterTap(index) {
            console.log(index)
            this.scrollId = this.letter[index]
        },

//点击获取城市名字
        emitclick(item) {           
                    console.log(item)                
        },

// 点击热门城市
        gocity(index) {
            this.isActive = index          
        },
        
        // 处理城市数据
        formatCityData: function(array) {
            for (let i = 0; i < array.length; i++) {
                if (i == 0) {
                    //第一条显示首字母
                    array[i].show = true
                } else if (array[i].letter != array[i - 1].letter) {
                    //首字母与上一条不一样需要显示
                    array[i].show = true
                    array[i - 1].last = true
                }
                if (array.length == 1) {
                    array[0].last = true
                }
                array.show = false
            }
            // 处理好的数据拿去循环
            this.allCityList = array
            console.log(this.allCityList)
        },
    },
}
</script>

<style lang="less">
page {
    height: 100%;
    background-color: #fafafa;
}
.introScroll {
    height: 100%;
    width: 100%;
    display: flex;
    position: relative;
    .cityListView {
        // scrollview高度设置vh兼容支付宝
        height: 100vh;
        overflow: scroll;
    }
}
/* 右侧字母 */
.city_right {
    z-index: 99;
    width: 60rpx;
    display: flex;
    height: 100%;
    position: absolute;
    right: 0;
    flex-direction: column;
    justify-content: center;
    top: 00rpx;
}

/* 右侧字母 */
.letter_item {
    display: block;
    font-size: 22rpx;
    font-weight: 400;
    color: #333333;
    text-align: center;
    margin-left: 20rpx;
    padding-top: 3rpx;
    margin-bottom: 8rpx;
    width: 26rpx;
    height: 26rpx;
    line-height: 26rpx;
    background: #d8d8d8;
    border-radius: 50%;
}

.forCityView {
    width: 100%;
    padding-bottom: 30rpx;
}

.forCityItem {
    display: flex;
    flex-direction: column;
    background-color: #fafafa;
}

.letterItemFirst {
    height: 49rpx;
    padding-left: 40rpx;
    font-size: 22rpx;
    line-height: 68rpx;
    font-weight: 400;
    color: #333333;
    background: #fafafa;
    width: 100%;
}

.itemCityContent {
    display: inline-block;
    width: 100%;
    height: 88rpx;
    font-size: 28rpx;
    color: #000000;
    padding-left: 40rpx;
    background-color: #fafafa;
    padding: 0 30rpx;
    line-height: 88rpx;
    margin-bottom: 1rpx;
}
.line {
    width: 642rpx;
    height: 5rpx;
    background-color: #e5e5e5;
}
</style>