Shikong/uni-app-wx-study
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

知乎热榜

Browse Source
This commit is contained in:
shikong 2024-10-17 15:08:35 +08:00
parent fe5faf2cdc
commit 3c7c62b224
Signed by: Shikong
GPG Key ID: BD85FF18B373C341
3 changed files with 118 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/pages/index/components/banner/index.vue Normal file
View File

@ -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>

51
src/pages/index/components/zhihu-hot-list/index.vue Normal file
View File

@ -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>

81
src/pages/index/index.vue
View File

@ -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>
<view class="text-area">
<Banner/>
<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 {