<template>
	<view>
    <uni-section title="实心标签" type="line">
      <view class="uni-padding-wrap uni-common-mt">
        <uni-segmented-control :current="data.current" :values="data.items" style-type="button"
                               active-color="#007aff" @clickItem="onChangeTab" />
      </view>
      <view class="content">
        <view v-if="data.current === 0">
          <!--数学-->
          <uni-list>
            <uni-list-item v-for="item in data.ShuxueList">
              <template v-slot:body>
                <view class="slot-box">
                  {{item}}
                  <text class="slot-text">title</text>
                  <text class="slot-text">date</text>
                  <text class="slot-text">wrong</text>
                  <button>查看错题</button>
                </view>
              </template>
            </uni-list-item>
            <uni-load-more :status="data.moreShuxue"></uni-load-more>
          </uni-list>
        </view>
        <view v-if="data.current === 1">
          <!--英语-->
          <uni-list>
            <uni-list-item v-for="item in data.YingyuList">
              <template v-slot:body>
                <view class="slot-box">
                  {{item}}
                  <text class="slot-text">title</text>
                  <text class="slot-text">date</text>
                  <text class="slot-text">wrong</text>
                  <button>查看错题</button>
                </view>
              </template>
            </uni-list-item>
            <uni-load-more :status="data.moreYingyu"></uni-load-more>
          </uni-list>
        </view>
      </view>
    </uni-section>
	</view>
</template>

<script setup>
	import {reactive, computed} from "vue";

  const data = reactive({
    items: ['选项卡1', '选项卡2', '选项卡3'],
    current: 0,
    ShuxueList: [],
    YingyuList: [],
    moreYingyu: 'more',
    moreShuxue: 'more'
  })

  function onChangeTab(e) {
    if (this.current !== e.currentIndex) {
      this.current = e.currentIndex
    }
  }
</script>

<style>
	       
</style>
