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>

相关推荐
某柚啊21 小时前
iOS移动端H5键盘弹出时页面布局异常和滚动解决方案
前端·javascript·css·ios·html5
给大佬递杯卡布奇诺1 天前
FFmpeg 基本API avcodec_open2函数内部调用流程分析
c++·ffmpeg·音视频
昔人'1 天前
使用css `focus-visible` 改善用户体验
前端·css·ux
码农阿树1 天前
视频解析转换耗时—OpenCV优化摸索路
人工智能·opencv·音视频
sishen41991 天前
2.4 TF卡
音视频
给大佬递杯卡布奇诺1 天前
FFmpeg 基本API avformat_alloc_context 函数内部调用流程分析
c++·ffmpeg·音视频
jjjxxxhhh1232 天前
【招聘】-音视频行业企业的招聘分析
音视频
爬虫程序猿2 天前
把 1688 商品详情搬进 MySQL:PHP 爬虫全链路实战(2025 版)
爬虫·python·音视频
aqi002 天前
FFmpeg开发笔记(八十四)使用国产的librestreaming实现RTMP直播
ffmpeg·音视频·直播·流媒体
筏.k2 天前
FFmpeg 核心 API 系列:音频重采样 SwrContext 完全指南(新API版本)
ffmpeg·音视频