uniapp开发精选短视频视频小程序实战笔记20240725，实现顶部轮播图和热门短剧

创建项目

创建项目，叫video_app。

在里面修改一下标题：

新建search搜索页面和me我的页面。

此时界面预览效果如下：

引入静态资源

主要是static里面的内容，全部复制过来。

配置底部导航栏

，放到顶层，和全部样式同级：

"tabBar": {
		"color": "#bfbfbf",
		"selectedColor": "#515151",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"list": [{
				"pagePath": "pages/index/index",
				"text": "首页",
				"iconPath": "static/tabBarIco/",
				"selectedIconPath": "static/tabBarIco/index_sel.png"
			},
			{
				"pagePath": "pages/search/search",
				"text": "搜索",
				"iconPath": "static/tabBarIco/",
				"selectedIconPath": "static/tabBarIco/search_sel.png"
			},
			{
				"pagePath": "pages/me/me",
				"text": "我的",
				"iconPath": "static/tabBarIco/",
				"selectedIconPath": "static/tabBarIco/me_sel.png"
			}
		]
	}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25

此时重启服务，重新预览，可以发现底部导航已经出来了。

开发首页

先在App.vue里面编写一个全局样式。

.page{
		width: 100%;
		height: 100%;
		background-color: #f7f7f7;
		position: absolute;
	}

• 1
• 2
• 3
• 4
• 5
• 6

修改 pages/index/

<script setup>

</script>

<template>
	<view class="page">
		首页
	</view>
</template>

<style scoped>
	
</style>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

此时页面效果如下：

开发首页顶部轮播图

修改pages/index/

<script setup>

</script>

<template>
	<view class="page">
		<!-- 轮播图开始 -->
		<swiper :indicator-dots="true" :autoplay="true">
			<swiper-item>
				<image src="../../static/carousel/" mode=""></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/carousel/" mode=""></image>
			</swiper-item>
		</swiper>
		<!-- 轮播图结束 -->
		首页
	</view>
</template>

<style scoped>
	
</style>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24

此时页面渲染效果如下：

修改，引用H5原生顶部导航栏：

{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "精选短视频",
				"app-plus": {
					"titleNView": false
				}
			}
		}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

美化轮播图样式，修改pages/index/：

<script setup>

</script>

<template>
	<view class="page">
		<!-- 轮播图开始 -->
		<swiper :indicator-dots="true" :autoplay="true" class="carousel">
			<swiper-item>
				<image src="../../static/carousel/" />
			</swiper-item>
			<swiper-item>
				<image src="../../static/carousel/" />
			</swiper-item>
		</swiper>
		<!-- 轮播图结束 -->
		首页
	</view>
</template>

<style scoped>
	.carousel,
	.carousel image {
		width: 100%;
		height: 440upx;
	}
</style>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27

此时页面效果如下：

这里会有两张图片，可以自动轮播，也可以手动切换，不过截图看不出这种效果来。

开发热门短剧标题

效果预览：

元素：

<view class="hot">
	<view class="hot-title">
		<image src="../../static/icos/" />
		<view>热门短剧</view>
	</view>
</view>

• 1
• 2
• 3
• 4
• 5
• 6

样式：

.hot {
	background-color: #fff;
	margin-top: 12upx;
	padding: 20upx;
}

.hot-title {
	display: flex;
	align-items: center;
}

.hot-title image {
	width: 30upx;
	height: 30upx;
}

.hot-title view {
	font-size: 20upx;
	margin-left: 20upx;
	font-weight: bold;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21

开发热门短剧横向轮播图

效果预览：

元素：

<scroll-view scroll-x="true" class="hot-scroll">
	<view class="poster" v-for="i in 9" :key="i">
		<view class="poster-wrapper">
			<image src="../../static/poster/" class="poster-image"></image>
			<view class="poster-title">
				蝙蝠侠大战超人
			</view>
			<view class="poster-score">
				<image src="../../static/icos/" class="star"></image>
				<image src="../../static/icos/" class="star"></image>
				<image src="../../static/icos/" class="star"></image>
				<image src="../../static/icos/" class="star"></image>
				<image src="../../static/icos/" class="star"></image>
				<view class="score">9.3</view>
			</view>
		</view>
	</view>
</scroll-view>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

样式：

/* 热门短剧开始 */
.hot {
	background-color: #fff;
	margin-top: 12upx;
	padding: 20upx;
}

.hot-title {
	display: flex;
	align-items: center;
}

.hot-title image {
	width: 30upx;
	height: 30upx;
}

.hot-title view {
	font-size: 20upx;
	margin-left: 20upx;
	font-weight: bold;
}

.hot-scroll {
	margin-top: 20upx;
	padding: 0;
	background-color: #fff;
	width: 100%;
	/* 不换行，实现横向轮播的关键 */
	white-space: nowrap;
}

.hot-scroll .poster {
	display: inline-block;
	margin-left: 20upx;
}

.hot-scroll .poster .poster-wrapper {
	display: flex;
	flex-direction: column;
}

.hot-scroll .poster .poster-wrapper .poster-image {
	width: 200upx;
	height: 200upx;
	border-radius: 5upx;
}

.hot-scroll .poster .poster-wrapper .poster-title {
	width: 200upx;
	margin-top: 10upx;
	font-size: 14upx;
	font-weight: bold;
	/* 省略号 */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hot-scroll .poster .poster-wrapper .poster-score {
	display: flex;
}

.hot-scroll .poster .poster-wrapper .poster-score .star {
	width: 20upx;
	height: 20upx;
	margin-top: 6upx;
}

.hot-scroll .poster .poster-wrapper .poster-score .score {
	font-size: 12upx;
	color: gray;
	margin-left: 8upx;
}
/* 热门短剧结束 */

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75

总结

本教程讲解了uniapp开发短视频小程序的入门教程，主要讲解了如何配置底部导航，如何开发顶部轮播图以及热门短视频。

打赏20元即可获取本套教程的全部源码。

人生苦短，我用Python，我是您身边的Python私教~