hbj_app/components/IndexListPage/IndexListPage.vue

<template>
	<view>
		<view class="address-book-container">
			<!-- 左侧通讯录 -->
			<scroll-view class="scroll-container" scroll-y="true" :scroll-into-view="toView" scroll-with-animation="true">
				<view class="address-book" v-for="(item, index) in addressBook" :key="index" :id="item.id">
					<!-- 先循环A -->
					<view class="address-book-index">{{ item.id }}</view>
					<!-- 再循环A里面的内容 -->
					<view class="contact-container" @click="XuanZhe(item)" v-for="(item, index) in item.data" :key="index">
						<img class="contact-img" src="/static/use/logo.png" alt="" />
						<view class="contact-detail-container">
							<view class="contact-name">{{ item.zh_title }}</view>
							<!-- <view class="contact-address">{{ item.address }}</view> -->
							<!-- <view class="contact-phone">{{ item.phone }}</view> -->
						</view>
					</view>
				</view>
			</scroll-view>

			<!-- 右侧字母导航条 -->
			<view class="letter-nav">
				<view class="item" v-for="(item, index) in indexList" :key="index" @click="toSelectIndex(item)">{{ item }}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'IndexListPage',
	data() {
		return {
			indexList: ['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'],
			toView: '',
			addressBook: [
				{
					id: 'A',
					data: [
						{ zh_title: '罗高峰', en_title: 'aa', address: 'AED', phone: '111111' },
						{ zh_title: '吴必成', en_title: 'aaaaa', address: 'ALL', phone: '222222' },
						{ zh_title: '吴', en_title: 'aaaaa', address: 'ALL', phone: '222222' },
						{ zh_title: '吴必成', en_title: 'aaaaa', address: 'ALL', phone: '222222' },
						{ zh_title: '吴必成', en_title: 'aaaaa', address: 'ALL', phone: '222222' },
						{ zh_title: '吴必成', en_title: 'aaaaa', address: 'ALL', phone: '222222' }
					]
				},
				{
					id: 'B',
					data: [
						{ zh_title: '罗高峰', en_title: 'aa', address: 'AED', phone: '111111' },
						{ zh_title: '吴必成', en_title: 'aaaaa', address: 'ALL', phone: '222222' },
						{ zh_title: '吴', en_title: 'aaaaa', address: 'ALL', phone: '222222' },
						{ zh_title: '吴必成', en_title: 'aaaaa', address: 'ALL', phone: '222222' },
						{ zh_title: '吴必成', en_title: 'aaaaa', address: 'ALL', phone: '222222' },
						{ zh_title: '吴必成', en_title: 'aaaaa', address: 'ALL', phone: '222222' }
					]
				},
				{
					id: 'C',
					data: [
						{ zh_title: '罗高峰', en_title: 'aa', address: 'AED', phone: '111111' },
						{ zh_title: '吴必成', en_title: 'aaaaa', address: 'ALL', phone: '222222' },
						{ zh_title: '吴', en_title: 'aaaaa', address: 'ALL', phone: '222222' },
						{ zh_title: '吴必成', en_title: 'aaaaa', address: 'ALL', phone: '222222' },
						{ zh_title: '吴必成', en_title: 'aaaaa', address: 'ALL', phone: '222222' },
						{ zh_title: '吴必成', en_title: 'aaaaa', address: 'ALL', phone: '222222' }
					]
				},
				{
					id: 'D',
					data: [
						{ zh_title: '罗高峰', en_title: 'aa', address: 'AED', phone: '111111' },
						{ zh_title: '吴必成', en_title: 'aaaaa', address: 'ALL', phone: '222222' },
						{ zh_title: '吴', en_title: 'aaaaa', address: 'ALL', phone: '222222' },
						{ zh_title: '吴必成', en_title: 'aaaaa', address: 'ALL', phone: '222222' },
						{ zh_title: '吴必成', en_title: 'aaaaa', address: 'ALL', phone: '222222' },
						{ zh_title: '吴必成', en_title: 'aaaaa', address: 'ALL', phone: '222222' }
					]
				}
			]
		};
	},
	methods: {
		XuanZhe(e) {
			console.log(e);
		},
		//
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		goToPage(url) {
			console.log(url);
			if (!url) return;
			uni.navigateTo({
				url
			});
		},
		//
		toSelectIndex(item) {
			this.toView = item;
		}
	}
};
</script>

<style scoped>
.img-sm {
	width: 20px;
	height: 20px;
}
.v-nav2 {
	display: flex;
	justify-content: space-between;
	padding: 5%;
	background-color: #d4e4ff;
	position: fixed;
	width: 90%;
	top: 0;
	z-index: 1;
}
.v-nav2-1 {
	display: flex;
}
.address-book-container {
	margin-top: 3%;
	margin-left: 2%;
}
.contact-img {
	width: 20px;
	height: 20px;
}
.scroll-container {
	height: 100vh;
}
.letter-nav {
	position: fixed;
	right: 25px;
	top: 10px;
	text-align: center;
}
.item {
	margin: 10rpx 0px;
}
.contact-container {
	display: flex;
	align-items: center;
	margin: 2%;
}
.contact-detail-container {
	margin-left: 2%;
	height: 60rpx;
}
</style>