hot.vue 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <template>
  2. <view>
  3. <block v-for="(item, index) in hotList" :key="index">
  4. <view class="padding-sm flex justify-between align-center bg-white">
  5. <view class="flex justify-around align-center">
  6. <view class="padding-right text-black text-bold">{{index + 1}}</view>
  7. <view class="padding-right">
  8. <u-avatar :src="item.avatar" size="130"></u-avatar>
  9. </view>
  10. <view>
  11. <view class="text-bold text-black">{{item.name}}</view>
  12. <view class="margin-tb-xs">{{item.hotValue}} 热力值</view>
  13. </view>
  14. </view>
  15. <view class="padding-right">
  16. <button class="cu-btn round text-white" style="background-color: #583ce6;height: 68upx;">
  17. <text class="cuIcon-hotfill padding-right-xs"></text>
  18. <text>打榜</text>
  19. </button>
  20. </view>
  21. </view>
  22. </block>
  23. </view>
  24. </template>
  25. <script>
  26. export default {
  27. data() {
  28. return {
  29. hotList: [
  30. {avatar: '/static/avatar.png', name: '易烊千玺', hotValue: '300'},
  31. {avatar: '/static/avatar.png', name: '易烊千玺', hotValue: '300'},
  32. {avatar: '/static/avatar2.png', name: '易烊千玺', hotValue: '300'},
  33. {avatar: '/static/avatar.png', name: '易烊千玺', hotValue: '300'},
  34. {avatar: '/static/avatar2.png', name: '易烊千玺', hotValue: '300'},
  35. {avatar: '/static/avatar.png', name: '易烊千玺', hotValue: '300'},
  36. {avatar: '/static/avatar.png', name: '易烊千玺', hotValue: '300'},
  37. {avatar: '/static/avatar2.png', name: '易烊千玺', hotValue: '300'},
  38. {avatar: '/static/avatar.png', name: '易烊千玺', hotValue: '300'},
  39. {avatar: '/static/avatar2.png', name: '易烊千玺', hotValue: '300'}
  40. ]
  41. }
  42. },
  43. onReachBottom() {
  44. console.log("到底了")
  45. },
  46. methods: {
  47. }
  48. }
  49. </script>
  50. <style>
  51. </style>