知乎热榜

src/pages/index/components/banner/index.vue

@@ -0,0 +1,56 @@
+<script setup>
+import CategoryItem from "../category-item";
+import {reactive} from "vue";
+
+const ctx = reactive({
+  pic: {
+    list: [
+      {
+        id: 1,
+        url: "https://www.httpbin.org/image/png",
+      },
+      {
+        id: 2,
+        url: "https://www.httpbin.org/image/jpeg",
+      },
+    ]
+  },
+})
+
+function previewImage(item) {
+  uni.previewImage({
+    current: item.url,
+    urls: this.pic.list.map(item => item.url),
+    indicator: 'default',
+    loop: true
+  })
+}
+</script>
+
+<template>
+  <swiper indicator-dots circular :autoplay="false" class="banner w-full">
+    <swiper-item>
+      <view style="display: grid;grid-template-columns: repeat(5, 1fr);">
+        <category-item src="https://www.httpbin.org/image/png" title="美食"></category-item>
+        <category-item src="https://www.httpbin.org/image/png" title="汽车票"></category-item>
+        <category-item src="https://www.httpbin.org/image/png" title="宠物"></category-item>
+        <category-item src="https://www.httpbin.org/image/png" title="汽车票"></category-item>
+        <category-item src="https://www.httpbin.org/image/png" title="宠物"></category-item>
+
+        <category-item src="https://www.httpbin.org/image/png" title="美食"></category-item>
+        <category-item src="https://www.httpbin.org/image/png" title="汽车票"></category-item>
+        <category-item src="https://www.httpbin.org/image/png" title="宠物"></category-item>
+        <category-item src="https://www.httpbin.org/image/png" title="汽车票"></category-item>
+        <category-item src="https://www.httpbin.org/image/png" title="宠物"></category-item>
+      </view>
+    </swiper-item>
+
+    <swiper-item v-for="item in ctx.pic.list" :key="item.id">
+      <image @tap="previewImage(item)" :src="item.url" class="w-full h-full"></image>
+    </swiper-item>
+  </swiper>
+</template>
+
+<style scoped>
+
+</style>

src/pages/index/components/zhihu-hot-list/index.vue

@@ -0,0 +1,51 @@
+<script setup>
+import {onLoad} from "@dcloudio/uni-app";
+import {reactive} from "vue";
+
+const ctx = reactive({
+  data: []
+})
+
+
+function fetchHotList() {
+  uni.request({
+    url: "https://api.zhihu.com/topstory/hot-list?limit=10&reverse_order=0"
+  }).then(resp => {
+    console.log(resp)
+    let res = resp.data || {}
+    let data = res.data || []
+    ctx.data = data || []
+  })
+}
+
+onLoad(() => {
+  fetchHotList()
+})
+</script>
+
+<template>
+  <view>
+    <uni-section title="知乎热榜" type="line">
+      <uni-list>
+        <uni-list-item v-for="item in ctx.data" :key="item.target.id" direction="column">
+          <template #header>
+            <view class="w-full overflow-hidden overflow-ellipsis whitespace-nowrap font-bold text-xl">
+              <text>{{item.target.title}}</text>
+            </view>
+          </template>
+
+          <template #body>
+            <view class="w-full overflow-hidden overflow-ellipsis line-clamp-2 mt-1">
+              <text>{{item.target.excerpt}}</text>
+            </view>
+          </template>
+        </uni-list-item>
+      </uni-list>
+    </uni-section>
+  </view>
+
+</template>
+
+<style scoped>
+
+</style>

src/pages/index/index.vue

@@ -1,5 +1,4 @@
 <template>
-
   <view class="navbar" :style="{ minHeight: navHeight + 'px' }" style="background: #1296db">
     <view
       class="topInfo"
@@ -11,49 +10,28 @@
     </view>
   </view>
 
-  <swiper indicator-dots circular :autoplay="false" class="banner w-full">
-    <swiper-item>
-      <view style="display: grid;grid-template-columns: repeat(5, 1fr);">
-        <category-item src="https://www.httpbin.org/image/png" title="美食"></category-item>
-        <category-item src="https://www.httpbin.org/image/png" title="汽车票"></category-item>
-        <category-item src="https://www.httpbin.org/image/png" title="宠物"></category-item>
-        <category-item src="https://www.httpbin.org/image/png" title="汽车票"></category-item>
-        <category-item src="https://www.httpbin.org/image/png" title="宠物"></category-item>
-
-        <category-item src="https://www.httpbin.org/image/png" title="美食"></category-item>
-        <category-item src="https://www.httpbin.org/image/png" title="汽车票"></category-item>
-        <category-item src="https://www.httpbin.org/image/png" title="宠物"></category-item>
-        <category-item src="https://www.httpbin.org/image/png" title="汽车票"></category-item>
-        <category-item src="https://www.httpbin.org/image/png" title="宠物"></category-item>
-      </view>
-    </swiper-item>
-
-    <swiper-item v-for="item in pic.list" :key="item.id">
-      <image @tap="previewImage(item)" :src="item.url" class="w-full h-full"></image>
-    </swiper-item>
-  </swiper>
-
   <view class="content">
-    <image class="logo" src="/static/logo.png"></image>
+    <Banner/>
-    <view class="text-area">
+    <ZhiHuHotList/>
+
+    <view class="text-center">
       <text class="title">{{ title }}</text>
     </view>
-    <view>
+    <view class="text-center">
       <text class="title">{{ now }}</text>
     </view>
-    <view>
-      <text class="title">{{ request.ip }}</text>
-    </view>
   </view>
 </template>
 
 <script>
 import moment from 'moment'
-import CategoryItem from "./components/category-item/index.vue";
+import Banner from "./components/banner/index.vue"
+import ZhiHuHotList from "./components/zhihu-hot-list/index.vue"
 let timer = null
 export default {
   components: {
-    CategoryItem
+    Banner,
+    ZhiHuHotList
   },
   data() {
     return {
@@ -62,23 +40,9 @@ export default {
       capsuleWidth: 0,
       now: moment().format('YYYY-MM-DD HH:mm:ss'),
       title: 'Hello',
-      pic: {
+
-        list: [
-          {
-            id: 1,
-            url: "https://www.httpbin.org/image/png",
-          },
-          {
-            id: 2,
-            url: "https://www.httpbin.org/image/jpeg",
-          },
-        ]
-      },
       search: {
         keyword: ""
-      },
-      request: {
-        ip: ""
       }
     }
   },
@@ -99,16 +63,9 @@ export default {
     timer = setInterval(() => {
       this.now = new moment().format('YYYY-MM-DD HH:mm:ss')
     }, 1000)
+
   },
   methods: {
-    previewImage(item) {
-      uni.previewImage({
-        current: item.url,
-        urls: this.pic.list.map(item => item.url),
-        indicator: 'default',
-        loop: true
-      })
-    },
     searchKeyword() {
       console.log(this.search.keyword)
 
@@ -130,22 +87,6 @@ export default {
 .content {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.logo {
-  height: 200rpx;
-  width: 200rpx;
-  margin-top: 200rpx;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 50rpx;
-}
-
-.text-area {
-  display: flex;
-  justify-content: center;
 }
 
 .title {