changetags

2025-11-03 10:53:55 +08:00
parent 5eb5c59e4b
commit c8aea3138c
4 changed files with 96 additions and 72 deletions
--- a/src/pages/news.vue
+++ b/src/pages/news.vue
@@ -1,76 +1,77 @@
 <template>
-  <view v-if="loading" class="page">
+  <main v-if="loading" class="page">

    <Head></Head>
    <!-- 内容区 -->
-    <main class="content">
-      <!-- 新闻区域 -->
-      <section class="news">
+    <scroll-view>
+      <section class="content">
+        <!-- 新闻区域 -->
+        <section class="news">

-        <!-- 轮播图 -->
-        <swiper v-if="post.imgs && post.imgs.length > 0" :indicator-dots="false" :autoplay="false" :interval="3000"
-          :duration="1000" :circular="true" class="swiper-banner" @change="onChange">
-          <swiper-item v-for="(item, i) in post.imgs" :key="i">
-            <view class="swiper-center">
-              <image v-if="item.type === 'img'" :src="item.src" class="swiper-item" mode="aspectFit" alt="新闻图片"
-                @load="onImageLoad(i)" @error="onImageError(i)" />
-              <video v-else-if="item.type === 'video'" :src="item.src" class="swiper-item" object-fit="contain" muted
-                style="pointer-events:none;" alt="新闻视频" />
-              <cover-view class="swiper-mask" @tap="common.openapp">
-              </cover-view>
-              <!-- 图片加载状态 -->
-              <view v-if="item.loading" class="image-loading">
-                <text>图片加载中...</text>
+          <!-- 轮播图 -->
+          <swiper v-if="post.imgs && post.imgs.length > 0" :indicator-dots="false" :autoplay="false" :interval="3000"
+            :duration="1000" :circular="true" class="swiper-banner" @change="onChange">
+            <swiper-item v-for="(item, i) in post.imgs" :key="i">
+              <view class="swiper-center">
+                <image v-if="item.type === 'img'" :src="item.src" class="swiper-item" mode="aspectFit" alt="新闻图片"
+                  @load="onImageLoad(i)" @error="onImageError(i)" />
+                <video v-else-if="item.type === 'video'" :src="item.src" class="swiper-item" object-fit="contain" muted
+                  style="pointer-events:none;" alt="新闻视频" />
+                <cover-view class="swiper-mask" @tap="common.openapp">
+                </cover-view>
+                <!-- 图片加载状态 -->
+                <view v-if="item.loading" class="image-loading">
+                  <text>图片加载中...</text>
+                </view>
+                <view v-if="item.error" class="image-error">
+                  <text>图片加载失败</text>
+                </view>
              </view>
-              <view v-if="item.error" class="image-error">
-                <text>图片加载失败</text>
+            </swiper-item>
+          </swiper>
+
+          <!-- 外部指示点:2个及以上才显示 -->
+          <view v-if="post.imgs && post.imgs.length > 1" class="dots-bar">
+            <view v-for="(dot, i) in post.imgs" :key="i" class="dot" :class="{ active: i === current }" />
+          </view>
+
+          <!-- 新闻标题 -->
+          <view v-if="post.title" class="newstitle">
+            <text class="title">{{ post.title }}</text>
+          </view>
+
+          <!-- 新闻信息 -->
+          <view v-if="post.copywriting && post.date" class="newsbottom">
+            <text class="copywriting">{{ post.copywriting }}</text>
+            <view class="meta-info">
+              <text v-if="post.source" class="source">{{ post.source }}</text>
+              <text v-if="post.source" class="date-text">·</text>
+              <view class="datetextview">
+                <text class="date-text">{{ common.formatDate(post.time) }}</text>
+              </view>
+              <view class="spacerview"></view>
+              <view class="toseeall" @tap="handleInteraction">
+                <text class="toseealltext">查看全文</text>
+                <image src="@/static/imgs/arrowrightup/arrowrightup@3x.png" class="arrowrightupicon" mode="aspectFit"
+                  alt="查看全文图标" />
              </view>
-            </view>
-          </swiper-item>
-        </swiper>
-
-        <!-- 外部指示点:2个及以上才显示 -->
-        <view v-if="post.imgs && post.imgs.length > 1" class="dots-bar">
-          <view v-for="(dot, i) in post.imgs" :key="i" class="dot" :class="{ active: i === current }" />
-        </view>
-
-        <!-- 新闻标题 -->
-        <view v-if="post.title" class="newstitle">
-          <text class="title">{{ post.title }}</text>
-        </view>
-
-        <!-- 新闻信息 -->
-        <view v-if="post.copywriting && post.date" class="newsbottom">
-          <text class="copywriting">{{ post.copywriting }}</text>
-          <view class="meta-info">
-            <text v-if="post.source" class="source">{{ post.source }}</text>
-            <text v-if="post.source" class="date-text">·</text>
-            <view class="datetextview">
-              <text class="date-text">{{ common.formatDate(post.time) }}</text>
-            </view>
-            <view class="spacerview"></view>
-            <view class="toseeall" @tap="handleInteraction">
-              <text class="toseealltext">查看全文</text>
-              <image src="@/static/imgs/arrowrightup/arrowrightup@3x.png" class="arrowrightupicon" mode="aspectFit"
-                alt="查看全文图标" />
            </view>
          </view>
-        </view>
+
+        </section>

      </section>

-    </main>
-
-    <!-- 评论区域 + 互动区域 -->
-    <Comments :postid="post.id" />
-
+      <!-- 评论区域 + 互动区域 -->
+      <Comments :postid="post.id" />
+    </scroll-view>
    <!-- 互动区域 -->
    <!-- <Intereact :countLike="post.countLike" :collectsum="post.collectsum" /> -->

    <!-- Findmore -->
    <Findmore />

-  </view>
+  </main>

  <!-- 错误显示 -->
  <!-- <view v-else class="errorload">
@@ -234,7 +235,7 @@ page,
 .page {
  width: 100%;
  max-width: 430px;
-  height: auto;
+  /* height: 100vh; */
  display: flex;
  flex-direction: column;
  margin: 0 auto;
--- a/src/pages/post.vue
+++ b/src/pages/post.vue
@@ -1,5 +1,5 @@
 <template>
-	<view v-if="loading" class="page">
+	<view v-if="finishloading" class="page">

 		<Head></Head>
 		<!-- 内容区 -->
@@ -97,7 +97,7 @@ const post = ref({})
 // 播放状态
 const isPlaying = ref(true) // 默认播放状态
 // 资源加载状态
-const loading = ref(false)
+const finishloading = ref(false)

 // 图片加载成功处理
 const onImageLoad = (index) => {
@@ -261,7 +261,7 @@ onLoad(() => {
 					// post.value = data
 					console.log(data)
 					Object.assign(post.value, data)
-					loading.value = true
+					finishloading.value = true
 				})
 			} else {
 				// 如果没有媒体资源，设置空数组
--- a/src/pages/video.vue
+++ b/src/pages/video.vue
@@ -1,5 +1,5 @@
 <template>
-	<main>
+	<main v-if="finishloading">


 		<!-- 视频容器 -->
@@ -87,6 +87,10 @@
 	<!-- Findmore -->
 	<!-- <Findmore /> -->

+	<view v-else class="loading-container">
+		<text>页面加载中...</text>
+	</view>
+
 </template>

 <script setup>
@@ -104,6 +108,9 @@ const formatDate = common.formatDate

 const videoData = reactive({})

+// 资源加载状态
+const finishloading = ref(false)
+
 // 折叠展开状态
 const isExpanded = ref(false)
 // const videoRef = ref(null)
@@ -268,6 +275,10 @@ onLoad(() => {
 					data.likesum = data.likeCount || 0
 					data.commentsum = data.commentCount || 0
 					data.sharesum = data.shareCount || 0
+					// 标记资源加载完成
+					finishloading.value = true
+
+

 					// 最后用data覆盖整个videoData
 					Object.assign(videoData, data)
@@ -304,9 +315,10 @@ onLoad(() => {
 main {
 	display: flex;
 	flex-direction: column;
-	position: relative;
+	/* position: relative; */
 	max-width: 430px;
-	max-height: 980px;
+	height: 100vh;
+	/* max-height: 980px; */
 	margin: 0 auto;
 }

@@ -320,8 +332,9 @@ main {
 	position: relative;
 	width: 100%;
 	max-width: 430px;
-	height: 100vh;
-	max-height: 980px;
+	height: 100%;
+	/* height: 100vh; */
+	/* max-height: 980px; */
 	flex-shrink: 0;
 	margin: 0 auto;
 	display: flex;
@@ -330,9 +343,9 @@ main {

 video {
 	width: 100%;
-	height: 100%;
+	/* height: 100%; */
 	min-height: 680px;
-	object-fit: cover;
+	object-fit: contain;
 	display: flex;
 	flex-direction: column;
 	margin: 0 auto;
@@ -572,4 +585,11 @@ video {
 .uni-video-cover-play-button::after {
 	content: '\ea24';
 }
+
+.loading-container {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100vh;
+}
 </style>