<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>