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:
Yuzhiran Dev
2026-07-10 18:13:15 +08:00
parent 021f56a83f
commit f1097a0331
+14 -12
View File
@@ -9,7 +9,7 @@
</view> </view>
<!-- 分类筛选 --> <!-- 分类筛选 -->
<scroll-view class="filter-bar" scroll-x :show-scrollbar="false"> <view class="filter-bar">
<view <view
class="filter-item" class="filter-item"
:class="{ active: activeFilter === idx }" :class="{ active: activeFilter === idx }"
@@ -19,10 +19,10 @@
> >
<text>{{ tag }}</text> <text>{{ tag }}</text>
</view> </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 v-for="(item, idx) in displayItems" :key="idx" class="trend-card" @click="goDetail(item)">
<!-- 头部标签 --> <!-- 头部标签 -->
<view class="card-header"> <view class="card-header">
@@ -59,12 +59,12 @@
<text class="empty-text">暂无趋势资讯</text> <text class="empty-text">暂无趋势资讯</text>
<text class="empty-sub">稍后再来看最新 AI 动态</text> <text class="empty-sub">稍后再来看最新 AI 动态</text>
</view> </view>
</scroll-view> </view>
</view> </view>
</template> </template>
<script setup> <script setup>
import { ref, computed } from 'vue' import { ref, computed, onMounted } from 'vue'
import { trendApi } from '@/utils/api' import { trendApi } from '@/utils/api'
const filters = ref(['全部', '🚀 产品', '📄 论文', '🔧 工具', '🏢 公司']) const filters = ref(['全部', '🚀 产品', '📄 论文', '🔧 工具', '🏢 公司'])
@@ -72,6 +72,10 @@ const activeFilter = ref(0)
const items = ref([]) const items = ref([])
const loading = ref(false) const loading = ref(false)
onMounted(() => {
fetchTrends()
})
const displayItems = computed(() => { const displayItems = computed(() => {
if (activeFilter.value === 0) return items.value if (activeFilter.value === 0) return items.value
const categoryMap = { 1: 'product', 2: 'paper', 3: 'tool', 4: 'company' } 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) return items.value.filter(item => item.category === category)
}) })
onMounted(() => {
fetchTrends()
})
async function fetchTrends() { async function fetchTrends() {
loading.value = true loading.value = true
try { try {
@@ -233,11 +233,13 @@ function getSampleData() {
color: var(--dim1-color); color: var(--dim1-color);
} }
// 新闻列表 // 列表
.trend-list { .trend-list {
flex: 1; flex: 1;
padding: 0 20px; overflow-y: auto;
padding-bottom: 20px; overflow-x: hidden;
-webkit-overflow-scrolling: touch;
padding: 0 16px 16px;
} }
.trend-card { .trend-card {