<template>
|
<view class="content">
|
<!-- 顶部固定导航栏 -->
|
<view class="fixed-top">
|
<u-navbar :is-fixed="true" :is-back="false" title-color="#333333" :background="{ background: '#FFFFFF' }">
|
<view class="navbar-content" slot="left">
|
<u-icon name="list" size="28" color="#333333"></u-icon>
|
</view>
|
<view class="navbar-content" slot="center">
|
<view class="tab-bar">
|
<view class="tab-item" :class="{ active: currentTab === 'about' }" @click="switchTab('about')">关注</view>
|
<view class="tab-item" :class="{ active: currentTab === 'discover' }" @click="switchTab('discover')">发现
|
</view>
|
<view class="tab-item" :class="{ active: currentTab === 'suzhou' }" @click="switchTab('suzhou')">苏州</view>
|
</view>
|
</view>
|
<view class="navbar-content" slot="right">
|
<u-icon name="search" size="28" color="#333333"></u-icon>
|
</view>
|
</u-navbar>
|
</view>
|
|
<!-- 标签页区域 -->
|
<view class="tab-scroll-area">
|
<scroll-view scroll-x class="tab-scroll" :scroll-left="scrollLeft">
|
<view class="tab-scroll-box">
|
<view class="tab-scroll-item" v-for="(item, index) in tabList" :key="index"
|
:class="{ active: currentScrollTab === item.id }" @click="switchScrollTab(item.id)">
|
{{ item.name }}
|
</view>
|
</view>
|
</scroll-view>
|
</view>
|
<!-- 内容区域 - 瀑布流布局 -->
|
<view class="content-area">
|
<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>
|
<common-footer flg="0"></common-footer>
|
</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 {
|
currentTab: 'discover', // 顶部主导航当前选中项
|
currentScrollTab: 'recommend', // 横向滚动标签当前选中项
|
scrollLeft: 0,
|
tabList: [
|
{ id: 'recommend', name: '推荐' },
|
{ id: 'straight', name: '直播' },
|
{ id: 'short', name: '短剧' },
|
{ id: 'food', name: '美食' },
|
{ id: 'travel', name: '穿搭' },
|
{ id: 'beauty', name: '美甲' },
|
{ id: 'more', name: '更多' }
|
],
|
flowList: [],
|
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() {
|
// 模拟数据
|
this.loadData()
|
},
|
onShow() {
|
console.log("aaaaa")
|
this.$refs.helangWaterfall.render(this.items, true);
|
},
|
methods: {
|
// 切换顶部主导航
|
switchTab(tab) {
|
this.currentTab = tab
|
},
|
// 切换横向滚动标签
|
switchScrollTab(id) {
|
this.currentScrollTab = id
|
// 可以在这里根据选中的标签加载不同的数据
|
this.loadData()
|
},
|
onRenderHeight({ colIndex, height, reportHeightTimeChange }) {
|
console.log("height:",height)
|
this.$refs.helangWaterfall.reportHeight({
|
colIndex,
|
height,
|
reportHeightTimeChange
|
})
|
},
|
// 加载瀑布流数据
|
loadData() {
|
// 模拟数据
|
const mockData = [
|
{
|
id: 1,
|
image: '/static/travel1.jpg',
|
title: '我们是旅行社！不是许愿池',
|
desc: '池油！😊',
|
author: {
|
avatar: '/static/avatar1.jpg',
|
name: '小鹿'
|
},
|
likes: 66,
|
hasVideo: false
|
},
|
{
|
id: 2,
|
image: '/static/travel2.jpg',
|
title: '不丑和好漂亮区别有多大...',
|
desc: '大家都不好好穿...偷偷私藏争气',
|
author: {
|
avatar: '/static/avatar2.jpg',
|
name: 'ZUU'
|
},
|
likes: 2278,
|
hasVideo: true
|
},
|
{
|
id: 3,
|
image: '/static/travel3.jpg',
|
title: '新疆旅游车上非法改装车辆太过分了',
|
desc: '请你记住我的样子',
|
author: {
|
avatar: '/static/avatar3.jpg',
|
name: '旅行达人'
|
},
|
likes: 158,
|
hasVideo: true
|
},
|
{
|
id: 4,
|
image: '/static/travel4.jpg',
|
title: '天塌了！？江苏国补结束了？？！',
|
desc: '',
|
author: {
|
avatar: '/static/avatar4.jpg',
|
name: '旅行家'
|
},
|
likes: 320,
|
hasVideo: false
|
}
|
]
|
|
// 将数据添加到瀑布流
|
// this.$refs.uWaterfall.clear()
|
// setTimeout(() => {
|
// mockData.forEach(item => {
|
// this.$refs.uWaterfall.add(item)
|
// })
|
// }, 500)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.content {
|
margin-top: 180rpx;
|
}
|
|
.fixed-top {
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100%;
|
z-index: 999;
|
}
|
|
.navbar-content {
|
display: flex;
|
align-items: center;
|
height: 44px;
|
}
|
|
.tab-bar {
|
display: flex;
|
justify-content: center;
|
width: 200px;
|
}
|
|
.tab-item {
|
padding: 0 15px;
|
font-size: 16px;
|
color: #666;
|
position: relative;
|
|
&.active {
|
color: #333;
|
font-weight: bold;
|
|
&::after {
|
content: '';
|
position: absolute;
|
bottom: -5px;
|
left: 50%;
|
transform: translateX(-50%);
|
width: 20px;
|
height: 2px;
|
background-color: #333;
|
}
|
}
|
}
|
|
.tab-scroll-area {
|
background-color: #fff;
|
position: fixed;
|
top: 44px;
|
left: 0;
|
width: 100%;
|
z-index: 998;
|
border-bottom: 1px solid #f5f5f5;
|
}
|
|
.tab-scroll {
|
width: 100%;
|
white-space: nowrap;
|
height: 46px;
|
}
|
|
.tab-scroll-box {
|
display: flex;
|
height: 46px;
|
align-items: center;
|
padding: 0 10px;
|
}
|
|
.tab-scroll-item {
|
display: inline-block;
|
padding: 0 15px;
|
font-size: 14px;
|
color: #666;
|
height: 46px;
|
line-height: 46px;
|
|
&.active {
|
color: #333;
|
font-weight: bold;
|
position: relative;
|
|
&::after {
|
content: '';
|
position: absolute;
|
bottom: 0;
|
left: 50%;
|
transform: translateX(-50%);
|
width: 20px;
|
height: 2px;
|
background-color: #fa3534;
|
}
|
}
|
}
|
|
.content-area {
|
padding: 10px;
|
margin-top: 46px; // 为标签页留出空间
|
}
|
|
.waterfall-item {
|
margin-bottom: 10px;
|
background-color: #fff;
|
border-radius: 8px;
|
overflow: hidden;
|
}
|
</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>
|
