const app = {
        data() {
            return {
                info: [], // 存儲題目詳情數組
                currentPage: 1, // 當前頁碼
                pageSize: 3, // 每頁顯示的題目數量
                sjid: sjid, // 注意：這里假設sjid已經定義
                isLoading: false, // 是否正在加載數據
                hasMore: true // 是否有更多數據可以加載
            };
        },
        methods: {
            fetchData(page = 1) {
                if (this.isLoading || !this.hasMore) return; // 如果正在加載或沒有更多數據，則不執行

                this.isLoading = true;
                axios
                    .get('/api/shijuan/timu_list.html', {
                        params: {
                            p: page,
                            limit: this.pageSize,
                            sjid: this.sjid
                        }
                    })
                    .then(response => {
                        if (response.data.data.length === 0) {
                            this.hasMore = false; // 如果沒有返回數據，則認為沒有更多數據
                        } else {
                            this.info = this.info.concat(response.data.data); // 合并數據
                            this.currentPage = response.data.p; // 更新當前頁碼（如果API返回了當前頁碼）
                        }
                        this.isLoading = false;
                    })
                    .catch(error => {
                        console.error('Error fetching data:', error);
                        this.isLoading = false;
                    });
            },
            handleScroll() {
                const windowHeight = window.innerHeight;
                const scrollPosition = window.scrollY + windowHeight;
                const documentHeight = document.documentElement.offsetHeight;

                if (scrollPosition >= documentHeight - 100 && !this.isLoading && this.hasMore) {
                    // 當滾動到頁面底部時加載更多數據
                    this.fetchData(this.currentPage);
                }
            }
        },
        mounted() {
            this.fetchData(this.currentPage);
            window.addEventListener('scroll', this.handleScroll);
        },
        beforeUnmount() {
            // 組件銷毀前移除事件監聽器
            window.removeEventListener('scroll', this.handleScroll);
        }
    };
    Vue.createApp(app).mount('#app');

    <div class="am-list-news-bd" id="app" @scroll="handleScroll">
        <ul class="am-list yulan-box">
            <li class="am-g  questions-box" v-for="site in info">
                <a :href="'http://yy.t.ihwrm.com/index/shijuan/timu_info.html?sjid='+site.sjid+'&tmid='+site.tmid" class="am-list-item-hd">

                    <p class="question clearfix">
                        <span class="q-type" style="margin-top:3px;">{{ site.tx_name }}</span>
                        <span class="question-tit">
                            <span class="red"></span>
                            {{ site.tigan }}
                        </span>
                    </p>
                </a>
                <span class="am-list-date">{{ site.datetime }}</span>
            </li>
        </ul>
        <!-- 加載更多提示 -->
        <div v-if="isLoading" class="loading">加載中...</div>
        <!-- 底部邊界，用于觸發加載 -->
        <div ref="bottomBoundary" style="height: 50px;"></div>
    </div>