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

创建项目

创建项目，叫video_app。

在pages.json里面修改一下标题：

此时界面预览效果如下：

引入静态资源

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

配置底部导航栏

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

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

开发首页

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

.page{

width: 100%;

height: 100%;

background-color: #f7f7f7;

position: absolute;

}

<view class="page">

首页

</view>

此时页面效果如下：

开发首页顶部轮播图

此时页面渲染效果如下：

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

此时页面效果如下：

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

开发热门短剧标题

效果预览：

元素：

<view class="hot-title">

<image src="../../static/icos/hot.png" />

<view>热门短剧</view>

</view>

样式：

.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 {

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;

}

/* 热门短剧结束 */

总结

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

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

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