123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126 |
- <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>
|