list.nvue 1.3 KB

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