feat: ✨新闻列表

Author: malqqin

env/.env

@@ -2,7 +2,7 @@ VITE_APP_TITLE = 'uni-vue3'
 VITE_APP_PORT = 8080
 
 VITE_UNI_APPID = ''
-VITE_WX_APPID = 'wx75c65ec54d3f83ed'
+VITE_WX_APPID = 'wx5d9163b7af511b7a'
 
 VITE_APP_PUBLIC_BASE=/
 

src/manifest.json

@@ -52,7 +52,7 @@
   },
   "quickapp": {},
   "mp-weixin": {
-    "appid": "wx75c65ec54d3f83ed",
+    "appid": "wx5d9163b7af511b7a",
     "setting": {
       "urlCheck": false,
       "minified": true

src/pages-sub/news/index.vue

@@ -1,29 +1,28 @@
 <template>
-  <view class="page-container bg-gray-100 min-h-screen">
-    <!-- 顶部导航 -->
-    <view class="bg-white px-4 py-3 text-center text-lg font-medium border-b border-gray-100">
-      新闻列表
-    </view>
-
+  <view class="page-container bg-white min-h-screen">
     <!-- 分类标签 -->
-    <view class="bg-white px-4 py-2">
-      <scroll-view scroll-x class="whitespace-nowrap">
-        <view
-          v-for="(item, index) in categories"
-          :key="index"
-          @click="selectCategory(index)"
-          class="inline-block mr-4"
-        >
-          <text
-            class="text-sm py-1"
-            :class="
-              currentCategory === index
-                ? 'text-blue-500 border-b-2 border-blue-500'
-                : 'text-gray-500'
-            "
+    <view class="bg-white px-4 pt-2 pb-0 sticky top-0 z-10 shadow-sm">
+      <scroll-view scroll-x class="whitespace-nowrap" show-scrollbar="false" enhanced>
+        <view class="tabs-container flex pb-2 relative">
+          <view
+            v-for="(item, index) in categories"
+            :key="index"
+            @click="selectCategory(index)"
+            class="tab-item px-4 py-2 relative"
           >
-            {{ item }}
-          </text>
+            <text
+              class="text-sm transition-all duration-300"
+              :class="currentCategory === index ? 'text-[#06f] font-medium' : 'text-[#060b2d]'"
+            >
+              {{ item }}
+            </text>
+            <!-- 底部激活线条 -->
+            <view
+              v-if="currentCategory === index"
+              class="tab-line absolute bottom-0 left-0 right-0 mx-auto h-0.5 bg-[#06f] rounded-full transition-all duration-300"
+              :style="{ width: '50%', transform: 'translateX(0)' }"
+            ></view>
+          </view>
         </view>
       </scroll-view>
     </view>
@@ -37,8 +36,9 @@
       refresher-enabled
       :refresher-triggered="isRefreshing"
       :refresher-threshold="80"
+      style="height: calc(100vh - 100px)"
     >
-      <view class="mt-3 bg-white">
+      <view class="mt-3">
         <view class="divide-y divide-gray-100">
           <view
             v-for="(item, index) in newsList"
@@ -47,24 +47,26 @@
             class="px-4 py-3 active:bg-gray-50"
           >
             <view class="flex">
-              <view class="flex-1">
-                <view class="text-base font-medium line-clamp-2">{{ item.title }}</view>
+              <view class="flex-1 pr-3">
+                <view class="text-base font-medium line-clamp-2 text-[#060b2d]">
+                  {{ item.title }}
+                </view>
                 <view class="flex items-center mt-2">
                   <view class="flex items-center">
                     <view class="w-4 h-4 mr-1 flex items-center justify-center">
-                      <text class="i-ri-user-line text-xs"></text>
+                      <text class="i-ri-user-line text-xs text-gray-400"></text>
                     </view>
                     <text class="text-xs text-gray-500">{{ item.author }}</text>
                   </view>
                   <view class="flex items-center ml-4">
                     <view class="w-4 h-4 mr-1 flex items-center justify-center">
-                      <text class="i-ri-time-line text-xs"></text>
+                      <text class="i-ri-time-line text-xs text-gray-400"></text>
                     </view>
                     <text class="text-xs text-gray-500">{{ item.time }}</text>
                   </view>
                   <view class="flex items-center ml-4">
                     <view class="w-4 h-4 mr-1 flex items-center justify-center">
-                      <text class="i-ri-eye-line text-xs"></text>
+                      <text class="i-ri-eye-line text-xs text-gray-400"></text>
                     </view>
                     <text class="text-xs text-gray-500">{{ item.views }}</text>
                   </view>
@@ -74,18 +76,18 @@
                 v-if="item.image"
                 :src="item.image"
                 mode="aspectFill"
-                class="w-20 h-20 rounded ml-3"
+                class="w-20 h-20 rounded-lg ml-auto"
               />
             </view>
           </view>
         </view>
       </view>
 
       <!-- 加载状态 -->
-      <view class="py-3 text-center">
+      <view class="py-4 text-center">
         <view v-if="isLoading" class="flex items-center justify-center">
-          <view class="w-4 h-4 mr-2 animate-spin">
-            <text class="i-ri-loader-4-line"></text>
+          <view class="w-8 h-8 mr-2 animate-spin">
+            <text class="i-ri-loader-4-line text-[#06f]"></text>
           </view>
           <text class="text-sm text-gray-500">加载中...</text>
         </view>
@@ -96,9 +98,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue"
+import { ref, onMounted, nextTick } from "vue"
 
-const categories = ["全部", "热点", "科技", "财经", "体育", "娱乐", "军事"]
+const categories = ["全部", "热点", "科技", "财经", "体育", "娱乐"]
 const currentCategory = ref(0)
 
 const newsList = ref([
@@ -142,42 +144,96 @@ const newsList = ref([
 const hasMore = ref(true)
 const isLoading = ref(false)
 const isRefreshing = ref(false)
+const pageNum = ref(1)
+const pageSize = ref(10)
 
 const selectCategory = (index: number) => {
+  if (currentCategory.value === index) return
   currentCategory.value = index
-  loadNews()
+  loadNews(true)
 }
 
-const loadNews = () => {
-  isLoading.value = true
-  // 模拟加载数据
-  setTimeout(() => {
-    newsList.value = [
-      {
-        title: "2024年全球科技创新大会在京召开，聚焦人工智能与可持续发展",
-        author: "科技日报",
-        time: "10分钟前",
-        views: "1.2万",
-        image: "https://picsum.photos/200/200?random=1",
-      },
-      {
-        title: "央行发布最新货币政策报告，强调稳健货币政策取向不变",
-        author: "财经网",
-        time: "30分钟前",
-        views: "2.5万",
-        image: "https://picsum.photos/200/200?random=2",
-      },
-      {
-        title: "中国女足晋级世界杯八强，创造历史最佳战绩",
-        author: "体育周刊",
-        time: "1小时前",
-        views: "5.8万",
-        image: "https://picsum.photos/200/200?random=3",
-      },
-    ]
-    isLoading.value = false
-    hasMore.value = true
-  }, 1000)
+const loadNews = (reset = false) => {
+  if (reset) {
+    pageNum.value = 1
+    isLoading.value = true
+
+    // 模拟加载数据
+    setTimeout(() => {
+      newsList.value = generateNewsItems(pageSize.value, currentCategory.value)
+      isLoading.value = false
+      hasMore.value = true
+    }, 800)
+  }
+}
+
+// 生成新闻数据函数
+const generateNewsItems = (count: number, categoryIndex: number) => {
+  const category = categories[categoryIndex]
+  const items = []
+
+  for (let i = 0; i < count; i++) {
+    items.push({
+      title: `${category !== "全部" ? `[${category}] ` : ""}标题 ${i + 1}: ${getRandomTitle()}`,
+      author: getRandomAuthor(),
+      time: getRandomTime(),
+      views: `${Math.floor(Math.random() * 10) + 1}.${Math.floor(Math.random() * 9)}万`,
+      image: `https://picsum.photos/200/200?random=${i + 10}`,
+    })
+  }
+
+  return items
+}
+
+// 随机标题
+const getRandomTitle = () => {
+  const titles = [
+    "人工智能技术进步迅速，专家呼吁加强伦理规范",
+    "全球芯片供应链重组，各国竞相加码半导体产业",
+    "新能源汽车销量持续增长，市场竞争日趋激烈",
+    "互联网金融监管政策完善，促进行业健康发展",
+    "电子商务平台积极拓展农村市场，带动乡村振兴",
+    "云计算技术加速企业数字化转型，提升运营效率",
+    "数字人民币试点范围扩大，支付方式多元化",
+    "绿色发展理念深入人心，低碳经济成为新趋势",
+    "元宇宙概念持续升温，相关技术研发提速",
+    "健康科技创新不断，智能医疗设备普及率提高",
+  ]
+  return titles[Math.floor(Math.random() * titles.length)]
+}
+
+// 随机作者
+const getRandomAuthor = () => {
+  const authors = [
+    "科技日报",
+    "财经网",
+    "体育周刊",
+    "IT之家",
+    "中国天气",
+    "商业观察",
+    "教育时报",
+    "健康报道",
+    "娱乐周刊",
+    "科学探索",
+  ]
+  return authors[Math.floor(Math.random() * authors.length)]
+}
+
+// 随机时间
+const getRandomTime = () => {
+  const times = [
+    "刚刚",
+    "5分钟前",
+    "10分钟前",
+    "30分钟前",
+    "1小时前",
+    "2小时前",
+    "3小时前",
+    "今天",
+    "昨天",
+    "前天",
+  ]
+  return times[Math.floor(Math.random() * times.length)]
 }
 
 const onRefresh = () => {
@@ -186,58 +242,29 @@ const onRefresh = () => {
 
   // 模拟刷新数据
   setTimeout(() => {
-    newsList.value = [
-      {
-        title: "2024年全球科技创新大会在京召开，聚焦人工智能与可持续发展",
-        author: "科技日报",
-        time: "刚刚",
-        views: "1.2万",
-        image: "https://picsum.photos/200/200?random=1",
-      },
-      {
-        title: "央行发布最新货币政策报告，强调稳健货币政策取向不变",
-        author: "财经网",
-        time: "5分钟前",
-        views: "2.5万",
-        image: "https://picsum.photos/200/200?random=2",
-      },
-    ]
+    newsList.value = generateNewsItems(pageSize.value, currentCategory.value)
     isRefreshing.value = false
     hasMore.value = true
+    pageNum.value = 1
   }, 1000)
 }
 
 const onLoadMore = () => {
   if (isLoading.value || !hasMore.value) return
   isLoading.value = true
+  pageNum.value++
 
   // 模拟加载更多数据
   setTimeout(() => {
-    const newItems = [
-      {
-        title: "新能源汽车销量创新高，市场占有率突破30%",
-        author: "汽车之家",
-        time: "4小时前",
-        views: "2.1万",
-        image: "https://picsum.photos/200/200?random=6",
-      },
-      {
-        title: "全国多地开展夏季旅游促销活动",
-        author: "旅游频道",
-        time: "5小时前",
-        views: "1.5万",
-        image: "https://picsum.photos/200/200?random=7",
-      },
-    ]
-
+    const newItems = generateNewsItems(10, currentCategory.value)
     newsList.value.push(...newItems)
     isLoading.value = false
 
-    // 模拟没有更多数据的情况
-    if (newsList.value.length >= 10) {
+    // 最多加载3页数据
+    if (pageNum.value >= 3) {
       hasMore.value = false
     }
-  }, 1000)
+  }, 800)
 }
 
 const navigateTo = (url: string) => {
@@ -248,4 +275,39 @@ const navigateTo = (url: string) => {
     },
   })
 }
+
+onMounted(() => {
+  // 初始加载
+  nextTick(() => {
+    loadNews(true)
+  })
+})
 </script>
+
+<style>
+.tabs-container {
+  position: relative;
+  overflow: hidden;
+}
+
+.tab-item {
+  position: relative;
+  transition: all 0.3s ease;
+}
+
+.tab-line {
+  animation: fade-in 0.3s ease;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    width: 0;
+  }
+
+  to {
+    opacity: 1;
+    width: 50%;
+  }
+}
+</style>