You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
127 lines
3.6 KiB
127 lines
3.6 KiB
4 years ago
|
<template>
|
||
|
|
<u-index-list :indexList="indexList">
|
||
|
|
<view slot="header" class="list">
|
||
|
|
<view class="list__item">
|
||
|
|
<u-avatar shape="square" size="35" icon="man-add-fill" fontSize="26" randomBgColor></u-avatar>
|
||
|
|
<text class="list__item__user-name">新的朋友</text>
|
||
|
|
</view>
|
||
|
|
<u-line></u-line>
|
||
|
|
<view class="list__item">
|
||
|
|
<u-avatar shape="square" size="35" icon="tags-fill" fontSize="26" randomBgColor></u-avatar>
|
||
|
|
<text class="list__item__user-name">标签</text>
|
||
|
|
</view>
|
||
|
|
<u-line></u-line>
|
||
|
|
<view class="list__item">
|
||
|
|
<u-avatar shape="square" size="35" icon="chrome-circle-fill" fontSize="26" randomBgColor></u-avatar>
|
||
|
|
<text class="list__item__user-name">朋友圈</text>
|
||
|
|
</view>
|
||
|
|
<u-line></u-line>
|
||
|
|
<view class="list__item">
|
||
|
|
<u-avatar shape="square" size="35" icon="qq-fill" fontSize="26" randomBgColor></u-avatar>
|
||
|
|
<text class="list__item__user-name">QQ</text>
|
||
|
|
</view>
|
||
|
|
<u-line></u-line>
|
||
|
|
</view>
|
||
|
|
<template v-for="(item, index) in itemArr">
|
||
|
|
<!-- #ifdef APP-NVUE -->
|
||
|
|
<u-index-anchor :text="indexList[index]" :key="index"></u-index-anchor>
|
||
|
|
<!-- #endif -->
|
||
|
|
<u-index-item :key="index">
|
||
|
|
<!-- #ifndef APP-NVUE -->
|
||
|
|
<u-index-anchor :text="indexList[index]"></u-index-anchor>
|
||
|
|
<!-- #endif -->
|
||
|
|
<view class="list" v-for="(item1, index1) in item" :key="index1">
|
||
|
|
<view class="list__item">
|
||
|
|
<image class="list__item__avatar" :src="item1.url"></image>
|
||
|
|
<text class="list__item__user-name">{{item1.name}}</text>
|
||
|
|
</view>
|
||
|
|
<u-line></u-line>
|
||
|
|
</view>
|
||
|
|
</u-index-item>
|
||
|
|
</template>
|
||
|
|
<view slot="footer" class="u-safe-area-inset--bottom">
|
||
|
|
<text class="list__footer">共305位好友</text>
|
||
|
|
</view>
|
||
|
|
</u-index-list>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const indexList = () => {
|
||
|
|
const indexList = []
|
||
|
|
const charCodeOfA = 'A'.charCodeAt(0)
|
||
|
|
indexList.push("↑")
|
||
|
|
indexList.push("☆")
|
||
|
|
for (let i = 0; i < 26; i++) {
|
||
|
|
indexList.push(String.fromCharCode(charCodeOfA + i))
|
||
|
|
}
|
||
|
|
indexList.push('#')
|
||
|
|
return indexList
|
||
|
|
}
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
indexList: indexList(),
|
||
|
|
urls: [
|
||
|
|
'https://cdn.uviewui.com/uview/album/1.jpg',
|
||
|
|
'https://cdn.uviewui.com/uview/album/2.jpg',
|
||
|
|
'https://cdn.uviewui.com/uview/album/3.jpg',
|
||
|
|
'https://cdn.uviewui.com/uview/album/4.jpg',
|
||
|
|
'https://cdn.uviewui.com/uview/album/5.jpg',
|
||
|
|
'https://cdn.uviewui.com/uview/album/6.jpg',
|
||
|
|
'https://cdn.uviewui.com/uview/album/7.jpg',
|
||
|
|
'https://cdn.uviewui.com/uview/album/8.jpg',
|
||
|
|
'https://cdn.uviewui.com/uview/album/9.jpg',
|
||
|
|
'https://cdn.uviewui.com/uview/album/10.jpg',
|
||
|
|
],
|
||
|
|
names: ["勇往无敌", "疯狂的迪飙", "磊爱可", "梦幻梦幻梦", "枫中飘瓢", "飞翔天使",
|
||
|
|
"曾经第一", "追风幻影族长", "麦小姐", "胡格罗雅", "Red磊磊", "乐乐立立", "青龙爆风", "跑跑卡叮车", "山里狼", "supersonic超"
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
itemArr() {
|
||
|
|
return this.indexList.map(item => {
|
||
|
|
const arr = []
|
||
|
|
for (let i = 0; i < 10; i++) {
|
||
|
|
arr.push({
|
||
|
|
name: this.names[uni.$u.random(0, this.names.length - 1)],
|
||
|
|
url: this.urls[uni.$u.random(0, this.urls.length - 1)]
|
||
|
|
})
|
||
|
|
}
|
||
|
|
return arr
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.list {
|
||
|
|
|
||
|
|
&__item {
|
||
|
|
@include flex;
|
||
|
|
padding: 6px 12px;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
&__avatar {
|
||
|
|
height: 35px;
|
||
|
|
width: 35px;
|
||
|
|
border-radius: 3px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__user-name {
|
||
|
|
font-size: 16px;
|
||
|
|
margin-left: 10px;
|
||
|
|
color: $u-main-color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&__footer {
|
||
|
|
color: $u-tips-color;
|
||
|
|
font-size: 14px;
|
||
|
|
text-align: center;
|
||
|
|
margin: 15px 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|