list.nvue 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <template>
  2. <view class="u-page">
  3. <up-list
  4. @scrolltolower="scrolltolower"
  5. >
  6. <up-list-item
  7. v-for="(item, index) in indexList"
  8. :key="index"
  9. >
  10. <up-cell
  11. :title="`列表长度-${index + 1}`"
  12. >
  13. <template #icon>
  14. <up-avatar
  15. shape="square"
  16. size="35"
  17. :src="item.url"
  18. customStyle="margin: -3px 5px -3px 0"
  19. ></up-avatar>
  20. </template>
  21. </up-cell>
  22. </up-list-item>
  23. </up-list>
  24. </view>
  25. </template>
  26. <script>
  27. export default {
  28. data() {
  29. return {
  30. indexList: [],
  31. urls: [
  32. 'https://uview-plus.jiangruyi.com/album/1.jpg',
  33. 'https://uview-plus.jiangruyi.com/album/2.jpg',
  34. 'https://uview-plus.jiangruyi.com/album/3.jpg',
  35. 'https://uview-plus.jiangruyi.com/album/4.jpg',
  36. 'https://uview-plus.jiangruyi.com/album/5.jpg',
  37. 'https://uview-plus.jiangruyi.com/album/6.jpg',
  38. 'https://uview-plus.jiangruyi.com/album/7.jpg',
  39. 'https://uview-plus.jiangruyi.com/album/8.jpg',
  40. 'https://uview-plus.jiangruyi.com/album/9.jpg',
  41. 'https://uview-plus.jiangruyi.com/album/10.jpg',
  42. ]
  43. }
  44. },
  45. onLoad() {
  46. this.loadmore()
  47. },
  48. methods: {
  49. scrolltolower() {
  50. this.loadmore()
  51. },
  52. loadmore() {
  53. for (let i = 0; i < 30; i++) {
  54. this.indexList.push({
  55. url: this.urls[uni.$u.random(0, this.urls.length - 1)]
  56. })
  57. }
  58. }
  59. },
  60. }
  61. </script>
  62. <style lang="scss">
  63. .u-page {
  64. padding: 0;
  65. }
  66. </style>