listView.vue 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <template>
  2. <view class="box">
  3. <view class="box_item" v-for="item in list" :key="item.id" @click="goPage('/pages/student/student', item.id)">
  4. {{ item.name }}({{ item.number }})
  5. <img class="item_img" src="../../static/images/right.png" />
  6. </view>
  7. <view class="no_data" v-if="!list.length">暂无数据</view>
  8. </view>
  9. </template>
  10. <script setup>
  11. import { onLoad } from '@dcloudio/uni-app'
  12. const props = defineProps({
  13. list: Array
  14. })
  15. onLoad(() => {})
  16. // 点击每一个学生回调
  17. const goPage = (url, id) => {
  18. console.log(id)
  19. uni.navigateTo({
  20. url
  21. })
  22. }
  23. </script>
  24. <style lang="scss" scoped>
  25. .box {
  26. margin-top: 22rpx;
  27. padding: 0 20rpx 60rpx 30rpx;
  28. box-sizing: border-box;
  29. width: 710rpx;
  30. background-color: #fff;
  31. overflow: hidden;
  32. .box_item {
  33. display: flex;
  34. justify-content: space-between;
  35. align-items: center;
  36. height: 90rpx;
  37. font-size: 28rpx;
  38. border-bottom: 1rpx solid #e6e6e6;
  39. .item_img {
  40. width: 31rpx;
  41. height: 31rpx;
  42. }
  43. }
  44. .no_data {
  45. margin-top: 20rpx;
  46. text-align: center;
  47. font-size: 28rpx;
  48. }
  49. }
  50. </style>