58 lines
1.2 KiB
Vue
58 lines
1.2 KiB
Vue
|
<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;
|
||
|
|
> image {
|
||
|
|
width: 70rpx;
|
||
|
|
height: 70rpx;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
margin-right: 30rpx;
|
||
|
|
}
|
||
|
|
> view {
|
||
|
|
font-size: 30rpx;
|
||
|
|
color: rgba(102,102,102,1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|