<template>
	<view class="concerns">
		<u-index-list :scrollTop="scrollTop">
			<view v-for="(item, index) in indexList" :key="index">
				<u-index-anchor :index="item" class="anchor-class" />
				<view class="list-cell">
					<image src="../static/mine/23.png"></image>
					<view>阿迪达斯</view>
				</view>
				<view class="list-cell">
					列表2
				</view>
				<view class="list-cell">
					列表3
				</view>
			</view>
		</u-index-list>
	</view>
</template>
<script>
export default {
	data() {
		return {
			scrollTop: 0,
			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"]
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	}
};
</script>
<style lang="scss" scoped>
.concerns {
	// padding: 35rpx 30rpx 0;
	// .u-index-anchor {
	// 	background-color: #ffffff !important;
	// }
	.list-cell {
		display: flex;
		box-sizing: border-box;
		align-items: center;
		width: 100%;
		overflow: hidden;
		margin: 50rpx 0;
		padding: 0 30rpx;
		> image {
			width: 70rpx;
			height: 70rpx;
			border-radius: 10rpx;
			margin-right: 30rpx;
		}
		> view {
			font-size: 30rpx;
			color: rgba(102,102,102,1);
		}
	}
}
</style>