store/pagesA/pages/phone-area/phone-area.vue

<template>
	<view class="phone-area">
		<custom-nav noback="noback" transparent="transparent" ref="ltm" title=" " />
		<view class="content">
			<!-- <scroll-view scroll-y :style="{ height: scrollviewHeight + 'px' }" :scroll-into-view="'item'+ itemName" -->
			<scroll-view scroll-y :scroll-into-view="'item'+ itemName" :scroll-with-animation="true"
				:enable-back-to-top="true">
				<view class="list-item" v-for="(item, index) in list" v-if="item.list.length" :key="index"
					:id="'item' + item.name">
					<!-- <view class="name">{{ item.name }}</view> -->
					<view class="item" v-for="(codeItem, codeIndex) in item.list" :key="codeIndex"
						@click="chooseCode(codeItem.name, codeItem.code,codeItem.reg,codeItem.phoneReg)">
						<text>{{ codeItem.name }}</text>
						<text class="code">{{ codeItem.code }}</text>
					</view>
				</view>
			</scroll-view>
			<!-- 	<view class="chooseIndex" @touchstart="tMove" @touchmove.stop="tMove" @touchend="tEnd">
				<view class="chooseIndex-item" v-for="(item, index) in list" :key="index" :id="'indexes-' + item.name">
					{{ item.name }}
				</view>
			</view> -->
			<view v-if="isShowChar" class="showChar">{{ showChar }}</view>
		</view>
	</view>
</template>

<script>
	import areaList from '@/common/util/phone-area.js'
	export default {
		data() {
			return {
				title: '选择国家/地区',
				scrollviewHeight: 0,
				list: areaList,
				itemName: '',
				chooseBar: {},
				isShowChar: false,
				showChar: ''
			}
		},
		mounted() { // 设置scrollview 高
			this.$offset('.content').then(res => this.scrollviewHeight = res.height) // 设置scrollview 高
			this.$offset('.chooseIndex').then(res => this.chooseBar = res) // 获取chooseBar高度
		},
		methods: {
			tMove(e) { // chooseBar touch 事件开始
				this.isShowChar = true
				if (e.touches[0].clientY >= this.chooseBar.top && e.touches[0].clientY <= this.chooseBar.bottom) {
					this.itemName = this.showChar = this.list[Math.floor(((e.touches[0].clientY - this.chooseBar.top) /
						this.chooseBar.height) * 26)].name
				}
			},
			tEnd() { // chooseBar touch 事件结束
				this.isShowChar = false;
			},
			chooseCode(name, code, reg, phoneReg) { // 选择代码
				uni.$emit('CHOOSEPHONECODE', name, '+' + code, reg, phoneReg)
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.phone-area {
		// @include page();
		width: 100%;
		height: 100vh;
		background: #F2F2F2;

		.content {
			scroll-view {
				background: #FFFFFF;
				height: 100vh;

				.list-item {
					.name {
						display: flex;
						height: 48rpx;
						font-size: 32rpx;
						padding: 0 30rpx;
						position: sticky;
						box-sizing: border-box;
						background: #F2F2F2;
						justify-content: flex-start;
					}

					.item {
						display: flex;
						align-items: center;
						height: 88rpx;
						box-sizing: border-box;
						padding: 0 100rpx 0 30rpx;
						justify-content: space-between;
						border-bottom: 1rpx solid #F2F2F2;

						text {
							color: #000;
						}

						.code {
							color: #42b983;
							padding: 10rpx 20rpx;
							border-radius: 8rpx;
							border: 1rpx solid #1AAD19;
						}
					}
				}
			}

			.chooseIndex {
				display: flex;
				flex-direction: column;
				top: 50%;
				right: 30rpx;
				width: 30rpx;
				height: 780rpx;
				position: fixed;
				background: #FFFFFF;
				border-radius: 8rpx;
				transform: translateY(-50%);
				box-shadow: 0rpx 0rpx 1rpx 1rpx #666666;

				.chooseIndex-item {
					// @include flex();
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
				}
			}

			.showChar {
				// @include flex();
				top: 50%;
				left: 50%;
				z-index: 1;
				width: 123rpx;
				height: 123rpx;
				color: #FFFFFF;
				position: fixed;
				font-size: 88rpx;
				border-radius: 50%;
				background: rgba(0, 0, 0, .3);
				transform: translate(-50%, -50%);
			}
		}
	}
</style>