fix: trend page onMounted import + scroll-view replacement + build verification
- Import onMounted from 'vue' in trend page (compiler macro not available in uni-app) - Replace scroll-view with view + CSS overflow for trend list (rendering issue in H5) - Fix CSS syntax error (duplicate closing brace) - All 16 pages tested and verified working in H5 dev server
This commit is contained in:
@@ -9,7 +9,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 分类筛选 -->
|
||||
<scroll-view class="filter-bar" scroll-x :show-scrollbar="false">
|
||||
<view class="filter-bar">
|
||||
<view
|
||||
class="filter-item"
|
||||
:class="{ active: activeFilter === idx }"
|
||||
@@ -19,10 +19,10 @@
|
||||
>
|
||||
<text>{{ tag }}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 新闻列表 -->
|
||||
<scroll-view class="trend-list" scroll-y>
|
||||
<view class="trend-list">
|
||||
<view v-for="(item, idx) in displayItems" :key="idx" class="trend-card" @click="goDetail(item)">
|
||||
<!-- 头部标签 -->
|
||||
<view class="card-header">
|
||||
@@ -59,12 +59,12 @@
|
||||
<text class="empty-text">暂无趋势资讯</text>
|
||||
<text class="empty-sub">稍后再来看最新 AI 动态</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { trendApi } from '@/utils/api'
|
||||
|
||||
const filters = ref(['全部', '🚀 产品', '📄 论文', '🔧 工具', '🏢 公司'])
|
||||
@@ -72,6 +72,10 @@ const activeFilter = ref(0)
|
||||
const items = ref([])
|
||||
const loading = ref(false)
|
||||
|
||||
onMounted(() => {
|
||||
fetchTrends()
|
||||
})
|
||||
|
||||
const displayItems = computed(() => {
|
||||
if (activeFilter.value === 0) return items.value
|
||||
const categoryMap = { 1: 'product', 2: 'paper', 3: 'tool', 4: 'company' }
|
||||
@@ -80,10 +84,6 @@ const displayItems = computed(() => {
|
||||
return items.value.filter(item => item.category === category)
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
fetchTrends()
|
||||
})
|
||||
|
||||
async function fetchTrends() {
|
||||
loading.value = true
|
||||
try {
|
||||
@@ -233,11 +233,13 @@ function getSampleData() {
|
||||
color: var(--dim1-color);
|
||||
}
|
||||
|
||||
// 新闻列表
|
||||
// 列表
|
||||
.trend-list {
|
||||
flex: 1;
|
||||
padding: 0 20px;
|
||||
padding-bottom: 20px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding: 0 16px 16px;
|
||||
}
|
||||
|
||||
.trend-card {
|
||||
|
||||
Reference in New Issue
Block a user