index.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <template>
  2. <view>
  3. <uni-section title="实心标签" type="line">
  4. <view class="uni-padding-wrap uni-common-mt">
  5. <uni-segmented-control :current="data.current" :values="data.items" style-type="button"
  6. active-color="#007aff" @clickItem="onChangeTab" />
  7. </view>
  8. <view class="content">
  9. <view v-if="data.current === 0">
  10. <!--数学-->
  11. <uni-list>
  12. <uni-list-item v-for="item in data.ShuxueList">
  13. <template v-slot:body>
  14. <view class="slot-box">
  15. {{item}}
  16. <text class="slot-text">title</text>
  17. <text class="slot-text">date</text>
  18. <text class="slot-text">wrong</text>
  19. <button>查看错题</button>
  20. </view>
  21. </template>
  22. </uni-list-item>
  23. <uni-load-more :status="data.moreShuxue"></uni-load-more>
  24. </uni-list>
  25. </view>
  26. <view v-if="data.current === 1">
  27. <!--英语-->
  28. <uni-list>
  29. <uni-list-item v-for="item in data.YingyuList">
  30. <template v-slot:body>
  31. <view class="slot-box">
  32. {{item}}
  33. <text class="slot-text">title</text>
  34. <text class="slot-text">date</text>
  35. <text class="slot-text">wrong</text>
  36. <button>查看错题</button>
  37. </view>
  38. </template>
  39. </uni-list-item>
  40. <uni-load-more :status="data.moreYingyu"></uni-load-more>
  41. </uni-list>
  42. </view>
  43. </view>
  44. </uni-section>
  45. </view>
  46. </template>
  47. <script setup>
  48. import {reactive, computed} from "vue";
  49. const data = reactive({
  50. items: ['选项卡1', '选项卡2', '选项卡3'],
  51. current: 0,
  52. ShuxueList: [],
  53. YingyuList: [],
  54. moreYingyu: 'more',
  55. moreShuxue: 'more'
  56. })
  57. function onChangeTab(e) {
  58. if (this.current !== e.currentIndex) {
  59. this.current = e.currentIndex
  60. }
  61. }
  62. </script>
  63. <style>
  64. </style>