<template>
|
<view :class="['app', theme]">
|
<!-- <view class="page"> -->
|
<view style="padding-top: 10rpx ;">
|
<u-search height="70" placeholder="搜索" searchIconSize="30" margin="0rpx 30rpx 0rpx 30rpx" v-model="search"
|
:show-action="true" @search="onSearch" @custom="onSearch" @clickIcon="onSearch" />
|
</view>
|
|
<!-- <u-tabs :list="tabList" @click="click"></u-tabs> -->
|
<u-tabs :list="tabList" @click="click">
|
<view slot="right" style="padding-left: 4px;" @tap="$u.toast('插槽被点击')">
|
<u-icon name="list" size="40" bold></u-icon>
|
</view>
|
</u-tabs>
|
|
<view class="list-view">
|
<waterfall ref="helangWaterfall" :col="2">
|
<template v-slot:default="{ list, colWidth }">
|
<waterfall-col v-for="(col, colIndex) in list" :key="colIndex" :colWidth="colWidth">
|
<waterfall-item v-for="(item, itemIndex) in col" :key="item.__waterfall_renderId" :colIndex="colIndex"
|
:reportHeightTime="item.__waterfall_reportHeightTime" @height="onRenderHeight">
|
<!-- 自定义内容 -->
|
<view class="card" @click="handleDetailClick(item)">
|
<image :src="item.imgurl" mode="widthFix" class="card-image" style="width: 100%;" />
|
<view class="card-title">
|
<u--text :lines="2" size="14px" :text="item.title" :bold="true"></u--text>
|
</view>
|
<view class="card-footer">
|
<view class="user-info">
|
<u-avatar :src="item.avatar" size="40" shape="circle" />
|
<view class="user-text">
|
<text class="nickname">{{ item.username }}</text>
|
<!-- <text class="date">{{ item.date }}</text> -->
|
</view>
|
</view>
|
<view class="opera-info">
|
<u-icon name="heart" size="30" color="#999" />
|
<text>{{ item.likes }}</text>
|
</view>
|
</view>
|
</view>
|
</waterfall-item>
|
</waterfall-col>
|
</template>
|
</waterfall>
|
</view>
|
|
</view>
|
</template>
|
|
<script>
|
import Waterfall from '@/uni_modules/helang-waterfall/components/waterfall/waterfall-list';
|
import WaterfallCol from '@/uni_modules/helang-waterfall/components/waterfall/waterfall-col';
|
import WaterfallItem from '@/uni_modules/helang-waterfall/components/waterfall/waterfall-item';
|
|
export default {
|
components: {
|
Waterfall,
|
WaterfallCol,
|
WaterfallItem,
|
},
|
data() {
|
return {
|
theme: 'light', // 默认 light，可切换为 dark
|
windowHeight: uni.getSystemInfoSync().windowHeight,
|
search: '',
|
tabList: [{
|
name: '关注',
|
}, {
|
name: '推荐',
|
}, {
|
name: '电影'
|
}, {
|
name: '科技'
|
}, {
|
name: '音乐'
|
}, {
|
name: '美食'
|
}, {
|
name: '文化'
|
}, {
|
name: '财经'
|
}, {
|
name: '手工'
|
}],
|
items: [
|
{
|
id: 1,
|
title: 'iPhone 高清全屏壁纸，划走就后悔',
|
url: 'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg',
|
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 全屏手机壁纸 #高质量壁纸高清 4K 全屏手机壁纸 #高质量壁纸',
|
url: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
imgurl: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
username: '4K wallpaper',
|
avatar: '/static/avatar2.jpg',
|
date: '02-24',
|
likes: 167,
|
},
|
{
|
id: 3,
|
title: 'iPhone 实况动态壁纸 #动态壁纸',
|
url: '/static/wallpaper3.jpg',
|
imgurl: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
username: '图墙精选',
|
avatar: '/static/avatar3.jpg',
|
date: '03-01',
|
likes: 980,
|
},
|
{
|
id: 4,
|
title: '高清小清新壁纸 浪漫的人都有自己的海',
|
url: '/static/wallpaper4.jpg',
|
imgurl: 'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg',
|
username: 'wallpaper',
|
avatar: '/static/avatar4.jpg',
|
date: '04-10',
|
likes: 456,
|
}
|
]
|
}
|
},
|
onLoad(options) {
|
// 尝试读取缓存设置的主题
|
console.log("theme", uni.getStorageSync('theme'))
|
const theme = uni.getStorageSync('theme') || 'light'
|
this.theme = theme
|
},
|
onShow() {
|
this.$nextTick(() => {
|
this.$refs.helangWaterfall?.render(this.items, true);
|
});
|
},
|
onUnload() {
|
if (this.$refs.helangWaterfall?.clear) {
|
this.$refs.helangWaterfall.clear();
|
}
|
},
|
methods: {
|
onSearch(value) {
|
uni.showToast({
|
title: `搜索：${value}`,
|
icon: 'none'
|
});
|
},
|
|
handleDetailClick(item) {
|
if (item.id === 1) {
|
uni.navigateTo({
|
url: '/sub-pages/film-list/film-official-detail?id=' + item.id
|
})
|
} else {
|
uni.navigateTo({
|
url: '/sub-pages/film-list/film-detail?id=' + item.id
|
})
|
}
|
|
},
|
onRenderHeight({ colIndex, height, reportHeightTimeChange }) {
|
console.log("height:", height)
|
this.$refs.helangWaterfall.reportHeight({
|
colIndex,
|
height,
|
reportHeightTimeChange
|
})
|
},
|
|
}
|
}
|
</script>
|
|
<style scoped>
|
.page {
|
background-color: #F5F5F5;
|
}
|
|
.list-view {
|
margin-top: 10px;
|
}
|
|
.filter-bar {
|
flex-wrap: wrap;
|
}
|
</style>
|
<style lang="scss">
|
.card {
|
border-radius: 10rpx;
|
background-color: #FFFFFF;
|
font-size: 14px;
|
line-height: 20px;
|
color: rgb(51, 51, 51);
|
// border: 1rpx solid rgb(51, 51, 51);
|
|
.card-image {
|
border-radius: inherit;
|
}
|
|
.card-title {
|
padding: 10rpx;
|
// font-size: 14px;
|
font-weight: 500;
|
|
}
|
|
.card-footer {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 10rpx;
|
}
|
|
.user-info {
|
display: flex;
|
align-items: center;
|
|
.user-text {
|
font-size: 18rpx;
|
line-height: 14px;
|
margin-left: 10rpx;
|
|
.nickname {
|
font-weight: bold;
|
display: block;
|
color: #646464;
|
}
|
|
.date {
|
font-size: 12px;
|
color: #aaa;
|
margin-top: 10rpx;
|
}
|
}
|
}
|
|
.opera-info {
|
display: flex;
|
align-items: center;
|
|
text {
|
margin-left: 10rpx;
|
font-size: 12px;
|
}
|
}
|
}
|
</style>
|
