<template>
|
<view :class="['app', theme]">
|
<view style="padding-top: 10rpx;">
|
<up-search height="70rpx" placeholder="搜索" search-icon-size="40rpx" margin="0rpx 30rpx" v-model="search"
|
:show-action="true" @search="onSearch" @custom="onSearch" @click-icon="onSearch" />
|
</view>
|
|
<up-tabs :list="tabList" @click="click">
|
<template #right>
|
<view style="padding-left: 4px;" @tap="() => showToast('插槽被点击')">
|
<up-icon name="list" size="40rpx" bold></up-icon>
|
</view>
|
</template>
|
</up-tabs>
|
|
<view class="list-view">
|
<up-waterfall v-model="flowList">
|
<template #left="{ leftList }">
|
<FlowCard v-for="(item, index) in leftList" :key="index" :item="item" @click="handleDetailClick" />
|
</template>
|
<template #right="{ rightList }">
|
<FlowCard v-for="(item, index) in rightList" :key="index" :item="item" @click="handleDetailClick" />
|
</template>
|
</up-waterfall>
|
</view>
|
</view>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, onMounted } from 'vue'
|
import { onLoad } from '@dcloudio/uni-app'
|
|
interface Item {
|
id: number
|
title: string
|
imgurl: string
|
username: string
|
avatar: string
|
date: string
|
likes: number
|
}
|
|
const theme = ref('light')
|
const search = ref('')
|
const flowList = ref<Item[]>([])
|
|
const tabList = ref([
|
{ name: '关注' },
|
{ name: '推荐' },
|
{ name: '电影' },
|
{ name: '科技' },
|
{ name: '音乐' },
|
{ name: '美食' },
|
{ name: '文化' },
|
{ name: '财经' },
|
{ name: '手工' }
|
])
|
|
const items: Item[] = [
|
{
|
id: 1,
|
title: 'iPhone 高清全屏壁纸，划走就后悔',
|
imgurl: 'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg',
|
username: '草莓喵喵',
|
avatar: '/static/avatar1.jpg',
|
date: '2024-12-01',
|
likes: 1397
|
},
|
{
|
id: 2,
|
title: '高清 4K 全屏手机壁纸 #高质量壁纸高清 4K 全屏手机壁纸 #高质量壁纸',
|
imgurl: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
username: '4K wallpaper',
|
avatar: '/static/avatar2.jpg',
|
date: '02-24',
|
likes: 167
|
},
|
{
|
id: 3,
|
title: 'iPhone 实况动态壁纸 #动态壁纸',
|
imgurl: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
username: '图墙精选',
|
avatar: '/static/avatar3.jpg',
|
date: '03-01',
|
likes: 980
|
},
|
{
|
id: 4,
|
title: '高清小清新壁纸 浪漫的人都有自己的海',
|
imgurl: 'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg',
|
username: 'wallpaper',
|
avatar: '/static/avatar4.jpg',
|
date: '04-10',
|
likes: 456
|
}
|
]
|
|
const onSearch = (value: string) => {
|
uni.showToast({
|
title: `搜索：${value}`,
|
icon: 'none'
|
})
|
}
|
|
const handleDetailClick = (item: Item) => {
|
const url =
|
item.id === 1
|
? `/sub-pages/film-list/film-official-detail?id=${item.id}`
|
: `/sub-pages/film-list/film-detail?id=${item.id}`
|
uni.navigateTo({ url })
|
}
|
|
const showToast = (msg: string) => {
|
uni.showToast({ title: msg, icon: 'none' })
|
}
|
|
onLoad(() => {
|
const storedTheme = uni.getStorageSync('theme') || 'light'
|
theme.value = storedTheme
|
})
|
|
onMounted(() => {
|
flowList.value = items
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
|
</style>
|
