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>
|
</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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user