indexList.nvue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <template>
  2. <u-index-list :indexList="indexList">
  3. <view slot="header" class="list">
  4. <view class="list__item">
  5. <u-avatar shape="square" size="35" icon="man-add-fill" fontSize="26" randomBgColor></u-avatar>
  6. <text class="list__item__user-name">新的朋友</text>
  7. </view>
  8. <u-line></u-line>
  9. <view class="list__item">
  10. <u-avatar shape="square" size="35" icon="tags-fill" fontSize="26" randomBgColor></u-avatar>
  11. <text class="list__item__user-name">标签</text>
  12. </view>
  13. <u-line></u-line>
  14. <view class="list__item">
  15. <u-avatar shape="square" size="35" icon="chrome-circle-fill" fontSize="26" randomBgColor></u-avatar>
  16. <text class="list__item__user-name">朋友圈</text>
  17. </view>
  18. <u-line></u-line>
  19. <view class="list__item">
  20. <u-avatar shape="square" size="35" icon="qq-fill" fontSize="26" randomBgColor></u-avatar>
  21. <text class="list__item__user-name">QQ</text>
  22. </view>
  23. <u-line></u-line>
  24. </view>
  25. <template v-for="(item, index) in itemArr">
  26. <!-- #ifdef APP-NVUE -->
  27. <u-index-anchor :text="indexList[index]" :key="index"></u-index-anchor>
  28. <!-- #endif -->
  29. <u-index-item :key="index">
  30. <!-- #ifndef APP-NVUE -->
  31. <u-index-anchor :text="indexList[index]"></u-index-anchor>
  32. <!-- #endif -->
  33. <view class="list" v-for="(item1, index1) in item" :key="index1">
  34. <view class="list__item">
  35. <image class="list__item__avatar" :src="item1.url"></image>
  36. <text class="list__item__user-name">{{item1.name}}</text>
  37. </view>
  38. <u-line></u-line>
  39. </view>
  40. </u-index-item>
  41. </template>
  42. <view slot="footer" class="u-safe-area-inset--bottom">
  43. <text class="list__footer">共305位好友</text>
  44. </view>
  45. </u-index-list>
  46. </template>
  47. <script>
  48. const indexList = () => {
  49. const indexList = []
  50. const charCodeOfA = 'A'.charCodeAt(0)
  51. indexList.push("↑")
  52. indexList.push("☆")
  53. for (let i = 0; i < 26; i++) {
  54. indexList.push(String.fromCharCode(charCodeOfA + i))
  55. }
  56. indexList.push('#')
  57. return indexList
  58. }
  59. export default {
  60. data() {
  61. return {
  62. indexList: indexList(),
  63. urls: [
  64. 'https://cdn.uviewui.com/uview/album/1.jpg',
  65. 'https://cdn.uviewui.com/uview/album/2.jpg',
  66. 'https://cdn.uviewui.com/uview/album/3.jpg',
  67. 'https://cdn.uviewui.com/uview/album/4.jpg',
  68. 'https://cdn.uviewui.com/uview/album/5.jpg',
  69. 'https://cdn.uviewui.com/uview/album/6.jpg',
  70. 'https://cdn.uviewui.com/uview/album/7.jpg',
  71. 'https://cdn.uviewui.com/uview/album/8.jpg',
  72. 'https://cdn.uviewui.com/uview/album/9.jpg',
  73. 'https://cdn.uviewui.com/uview/album/10.jpg',
  74. ],
  75. names: ["勇往无敌", "疯狂的迪飙", "磊爱可", "梦幻梦幻梦", "枫中飘瓢", "飞翔天使",
  76. "曾经第一", "追风幻影族长", "麦小姐", "胡格罗雅", "Red磊磊", "乐乐立立", "青龙爆风", "跑跑卡叮车", "山里狼", "supersonic超"
  77. ]
  78. }
  79. },
  80. computed: {
  81. itemArr() {
  82. return this.indexList.map(item => {
  83. const arr = []
  84. for (let i = 0; i < 10; i++) {
  85. arr.push({
  86. name: this.names[uni.$u.random(0, this.names.length - 1)],
  87. url: this.urls[uni.$u.random(0, this.urls.length - 1)]
  88. })
  89. }
  90. return arr
  91. })
  92. }
  93. },
  94. }
  95. </script>
  96. <style lang="scss">
  97. .list {
  98. &__item {
  99. @include flex;
  100. padding: 6px 12px;
  101. align-items: center;
  102. &__avatar {
  103. height: 35px;
  104. width: 35px;
  105. border-radius: 3px;
  106. }
  107. &__user-name {
  108. font-size: 16px;
  109. margin-left: 10px;
  110. color: $u-main-color;
  111. }
  112. }
  113. &__footer {
  114. color: $u-tips-color;
  115. font-size: 14px;
  116. text-align: center;
  117. margin: 15px 0;
  118. }
  119. }
  120. </style>