Vue.js 无限滚动组件示例 - 使用 <script setup> 实现

<script setup>
import { computed, ref } from 'vue';

// 组件引入
import Header from '../../components/Header.vue';

// 数据与方法
const selectedRegion = ref('全部');
const regions = ['全部', '中国', '日本', '欧美'];

function selectRegion(region) {
  selectedRegion.value = region;
}

// 无限滚动相关
const count = ref(25);
const loading = ref(false);
const noMore = computed(() => count.value >= 1000);
const disabled = computed(() => loading.value || noMore.value);

const load = () => {
  loading.value = true;
  setTimeout(() => {
    count.value += 5;
    loading.value = false;
  }, 2000);
};

// 导出数据与方法
export default {
  selectedRegion,
  regions,
  selectRegion,
  count,
  loading,
  noMore,
  disabled,
  load,
};
</script>