uniapp视频首页页面

<style scoped>

/* 全局样式 */

.container {

display: flex;

flex-direction: column;

height: 100vh;

}

/* 搜索栏样式 */

.search-bar {

display: flex;

align-items: center;

padding: 10px;

background-color: #fff;

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}

.logo {

width: 40px;

height: 40px;

margin-right: 10px;

}

.search-input {

flex: 1;

padding: 10px;

border: 1px solid #ddd;

border-radius: 5px;

}

.search-button {

padding: 10px 20px;

margin-left: 10px;

background-color: #ff4081;

color: #fff;

border: none;

border-radius: 5px;

}

/* 导航栏样式 */

.nav-bar {

display: flex;

justify-content: space-around;

padding: 10px 0;

background-color: #fff;

border-bottom: 1px solid #ddd;

}

.nav-item {

flex: 1;

text-align: center;

font-size: 16px;

color: #333;

padding: 10px;

}

.nav-item.active {

color: #ff4081;

border-bottom: 2px solid #ff4081;

}

/* 内容区域样式 */

.content-area {

flex: 1;

background-color: #f5f5f5;

}

.content-grid {

display: flex;

flex-wrap: wrap;

padding: 10px;

}

.content-item {

width: 48%;

margin: 1%;

background-color: #fff;

border-radius: 5px;

overflow: hidden;

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}

.content-item-image {

width: 100%;

height: 150px; /* 固定高度,确保方形显示 */

}

.content-item-title {

padding: 10px;

font-size: 14px;

color: #333;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

</style>

<template>

<view class="container">

<!-- 搜索栏 -->

<view class="search-bar">

<image class="logo" src="/static/images/logo.png" mode="widthFix"></image>

<input class="search-input" placeholder="搜索视频"/>

<button class="search-button">搜索</button>

</view>

<!-- 导航栏 -->

<view class="nav-bar">

<view :class="['nav-item', {'active': activeTab === 'recommend'}]" @click="changeTab('recommend')">推荐</view>

<view :class="['nav-item', {'active': activeTab === 'hot'}]" @click="changeTab('hot')">热门</view>

<view :class="['nav-item', {'active': activeTab === 'article'}]" @click="changeTab('article')">图文</view>

<view :class="['nav-item', {'active': activeTab === 'short'}]" @click="changeTab('short')">短视频</view>

</view>

<!-- 内容区域 -->

<scroll-view class="content-area" :style="{height: contentHeight + 'px'}" scroll-y>

<view class="content-grid">

<navigator v-for="(item, index) in items" :key="index" :url="'/pages/videoDetail/main?id=' + item.id" hover-class="navigator-hover" class="content-item">

<image :src="item.image" mode="aspectFill" class="content-item-image"></image>

<text class="content-item-title">{{ item.title }}</text>

</navigator>

</view>

</scroll-view>

<!-- 底部导航栏(uniapp自带) -->

<uni-tabbar></uni-tabbar>

</view>

</template>

<script>

export default {

data() {

return {

activeTab: 'recommend',

items: [

{ id: 1, image: '/static/images/video1.jpg', title: '视频标题1' },

{ id: 2, image: '/static/images/video2.jpg', title: '视频标题2' },

{ id: 3, image: '/static/images/video3.jpg', title: '视频标题3' },

// 添加更多内容项

],

screenHeight: 0,

searchBarHeight: 60, // 搜索栏高度(可根据实际情况调整)

navBarHeight: 40, // 导航栏高度(可根据实际情况调整)

tabBarHeight: 50, // 底部导航栏高度(可根据实际情况调整)

};

},

computed: {

contentHeight() {

return this.screenHeight - this.searchBarHeight - this.navBarHeight - this.tabBarHeight;

}

},

onReady() {

// 获取屏幕高度

const systemInfo = uni.getSystemInfoSync();

this.screenHeight = systemInfo.windowHeight;

},

methods: {

changeTab(tab) {

this.activeTab = tab;

// 根据选中的标签加载相应的内容

// 这里可以调用API获取数据

}

}

};

</script>

相关推荐
孤水寒月2 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
顾道长生'2 小时前
(Arxiv-2025)通过动态 token 剔除实现无需训练的高效视频生成
计算机视觉·音视频·视频生成
涔溪10 小时前
HTML5 实现的圣诞主题网站源码,使用了 HTML5 和 CSS3 技术,界面美观、节日氛围浓厚。
css3·html5·节日
每次的天空10 小时前
Android-自定义View的实战学习总结
android·学习·kotlin·音视频
呆呆的心11 小时前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css
爱分享的飘哥12 小时前
【V6.0 - 听觉篇】当AI学会“听”:用声音特征捕捉视频的“情绪爽点”
人工智能·音视频
AA-代码批发V哥12 小时前
CSS之布局详解指南
css
菜包eo13 小时前
二维码驱动的独立站视频集成方案
网络·python·音视频
拾光拾趣录15 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
FogLetter15 小时前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css