uniapp小视频项目：关注页面开发

2024-05-12 08:48
文章标签 uniapp 项目 开发 页面 关注 小视频

本文主要是介绍uniapp小视频项目：关注页面开发，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

    • 1、关注页面开发
    • 2、关注页面完善
    • 3、创建好友页面
    • 4、关注页面动态播放视频

1、关注页面开发

首先添加跳转，修改 nav.vue 给首页和关注增加跳转

<navigator open-type="switchTab" url="/pages/index/index" class="tab-box">首页
</navigator><navigator open-type="switchTab" url="/pages/follow/follow" class="tab-box">关注
</navigator>

修改 follow.vue

<template><view class="follow"><follow-nav></follow-nav><tab></tab></view>
</template><script>import followNav from '../../components/followNav.vue'import tab from '../../components/tab.vue'export default {components:{followNav,tab}}
</script><style>
.follow{width: 100%;height: 100%;background: #000000;
}
</style>

增加 follow-nav.vue，由于和首页头部很像，所以我们直接复制改一下

<template><view class="followNav"><view class="iconfont icon-xiangji icon"><text class="icon-text">随拍</text></view><view class="middle"><navigator open-type="switchTab" class="text" url="/pages/index/index">关注</navigator><navigator open-type="navigate" class="text" url="/pages/city/city">好友</navigator></view></view>
</template><script>export default {name:"followNav",data() {return {};}}
</script><style>
.followNav{width: 100%;height: 35px;line-height: 35px;position: fixed;top: 25px;left: 0;margin: 0 auto;z-index: 20;//只要比19大,就显示在视频上方
}
.icon{position: absolute;left: 5px;top: 0;color: #ffffff;width: 20%;text-align: center;font-size: 20px;
}
.middle{text-align: center;
}
.text{display: inline;color: #FFFFFF;margin: 0 10px;font-size: 15px;
}
.icon-text{font-size: 15px;margin-left: 5px;
}
</style>

目前效果：
在这里插入图片描述

2、关注页面完善

先看效果：
在这里插入图片描述
修改 follow.vue

<template><view class="follow"><follow-nav></follow-nav><follow-list></follow-list><tab></tab></view>
</template><script>import followNav from '../../components/followNav.vue'import tab from '../../components/tab.vue'import followList from '../../components/followList.vue'export default {components:{followNav,tab,followList},data() {return {}},methods: {}}
</script><style>
.follow{width: 100%;height: 100%;background: #000000;
}
</style>

新建 followList.vue

<template><view class="followList"><view class="item"><view class="top"><view class="image-box"><image class="img" src="../static/profile.webp"></image></view><view class="author-name">张三</view><view class="iconfont icon-gengduo share"></view></view><view class="title">我爱学习</view><view class="video-box"><video class='video' objectFit="cover" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video><view class="music-box"><view class="music">今天好生气啊我好后悔搭理那条疯狗</view></view></view><view class="box"><view class="left">3-15</view><view class="right"><view class="iconfont icon-xin icon"><text class="text">赞</text></view><view class="iconfont icon-pinglun icon"><text class="text">评论</text></view><view class="iconfont icon-fenxiang icon"><text class="text">分享</text></view></view></view><view class="comment"><view class="number">4.2w评论过</view><view class="comment-box"><view class="iconfont icon-icon-checkin icon-pen"></view><input class="input-box" type="text" placeholder="添加评论..." /></view></view></view></view>
</template><script>export default {name: "followList",data() {return {};}}
</script><style>.followList {width: 100%;background: #000000;padding-bottom: 50px;margin-top: 10px;}.item {padding: 0 15px;}.top {height: 50px;}.image-box {float: left;}.img {width: 35px;height: 35px;border-radius: 50%;}.author-name {float: left;font-size: 14px;height: 35px;line-height: 35px;color: #ffffff;margin-left: 10px;}.share {float: right;font-size: 25px;margin-right: 5px;height: 35px;line-height: 35px;color: #ffffff;}.title {width: 100%;font-size: 13px;height: 25px;line-height: 25px;color: #ffffff;}.video-box {width: 100%;height: 350px;position: relative;}.video {width: 80%;height: 100%;z-index: 19;}.music-box{z-index: 20;position: absolute;bottom: 10px;left: 10px;width: 100px;overflow: hidden;}.music{color: #ffffff;font-size: 14px;width:250px ;animation: music 4s linear infinite;}.box {height: 25px;margin-top: 25px;}.left {float: left;font-size: 11px;height: 25px;line-height: 25px;color: #AAAAAA;}.right {float: right;height: 25px;}.icon {float: right;color: #ffffff;font-size: 18px;margin-left: 10px;}.text {padding: 0 5px;font-size: 13px;}.comment{width: 100%;}.number{width: 100%;height: 25px;font-size: 15px;line-height: 15px;color: #AAAAAA;margin:10px 0}.comment-box{position: relative;}.icon-pen{height: 25px;color: #ffffff;position:absolute;left: 0;top: 0;}.input-box{margin-left: 28px;font-size: 15px;}@keyframes music{0%{transform: translate3d(80%,0,0);}100%{transform: translate3d(-80%,0,0);}}
</style>

3、创建好友页面

创建好友页面 friend.vue

<template><view class="friend"><follow-nav :page="page"></follow-nav><follow-list :list="list"></follow-list><tab></tab></view>
</template><script>import followNav from '../../components/followNav.vue'import tab from '../../components/tab.vue'import followList from '../../components/followList.vue'export default {components:{followNav,tab,followList},data() {return {page:'friend',list:[]}},methods: {getVideo() {uni.request({url:"http://127.0.0.1:8080/downloads/video.json",success: (res) => {this.list = res.data.list}})}},created() {this.getVideo()}}
</script><style>
.friend{width: 100%;height: 100;background: #000000;
}
</style>

设置为 tabbar 页面，修改 pages.json

"tabBar": {"list": [......{"pagePath": "pages/friend/friend","text": "好友"}]}

friend.vue 页面中，created 后，请求到视频数据赋值给 list，然后传给子组件 follow-list

follow-list 中接收 list，动态渲染页面数据

<template><view class="followList"><view class="item" v-for="item in list" :key="item.id"><view class="top"><view class="image-box"><image class="img" src="../static/profile.webp"></image></view><view class="author-name">{{item.author}}</view><view class="iconfont icon-gengduo share"></view></view><view class="title">{{item.title}}</view><view class="video-box"><video class='video' objectFit="cover" :src="item.src"></video><view class="music-box"><view class="music">今天好生气啊我好后悔搭理那条疯狗</view></view></view><view class="box"><view class="left">3-15</view><view class="right"><view class="iconfont icon-xin icon"><text class="text">赞</text></view><view class="iconfont icon-pinglun icon"><text class="text">评论</text></view><view class="iconfont icon-fenxiang icon"><text class="text">分享</text></view></view></view><view class="comment"><view class="number">{{item.commentNumber}}评论过</view><view class="comment-box"><view class="iconfont icon-icon-checkin icon-pen"></view><input class="input-box" type="text" placeholder="添加评论..." /></view></view></view></view>
</template><script>export default {props:['list'],name: "followList",data() {return {};}}
</script>......

因为好友页面和关注页面类似，所以我们在顶部加一个下划线区分到底显示在哪个页面。friend.vue 向 follow-nav.vue 中传一个 page 来标识本页面

<follow-nav :page="page"></follow-nav>data() {return {page:'friend',list:[]}
}

同样 follow.vue 也同样传一个标识来标识本页面

<follow-nav :page="page"></follow-nav>
data() {return {page: 'follow',list:[]}
}

follow-nav.vue 中接收 page 这个参数，根据参数不同改变下划线样式

<template><view><view class="followNav"><view class="iconfont icon-xiangji icon"><text class="icon-text">随拍</text></view><view class="middle"><navigator open-type="switchTab" class="text" url="/pages/follow/follow" :style="follow">关注</navigator><navigator open-type="switchTab" class="text" url="/pages/friend/friend" :style="friend">好友</navigator></view></view><view class="ground"></view></view>
</template><script>export default {props: ['page'],name: "followNav",data() {return {follow: '',friend: ''};},mounted() {if (this.page === "friend") {this.friend = "border-bottom: 2px solid #F0AD4E"} else {this.follow = "border-bottom: 2px solid #F0AD4E"}console.log(this.page);}}
</script>
......

看下效果：
在这里插入图片描述

4、关注页面动态播放视频

当进行上下滑动时，只有显示在屏幕中的视频播放，其他视频暂停，要实现这个功能，我们在 follow-list.vue 中增加 scrollview

<template><view class="followList"><scroll-view style="height: 100%;" scroll-y="true" @scroll="scroll">......</scroll-view></view>
</template><script>export default {props: ['list'],name: "followList",data() {return {};},methods:{scroll(res){console.log(res);}}}
</script><style>//修改父级高度为 100%，同时为 item 设置一个固定的高度.followList {width: 100%;background: #000000;padding-bottom: 50px;margin-top: 10px;height: 100%;}.item {padding: 0 15px;height: 550px;}......
</style>

在滚动时执行 scroll 方法，打印里边的参数，其中 detail.scrollTop 为距离顶部的距离
在这里插入图片描述
然后除以 550，算出当前处于第几个视频。为了修正距离，给 scrollTop 加上了 150

methods:{scroll(res){const index = Math.floor((res.detail.scrollTop+150)/550)console.log(index);}
}

然后把视频封装成一个组件，新建 followPlayer.vue，把 follow-list 中的 video 和相关样式放到 followPlayer 中

<template><view class="followPlayer"><video id="myVideo" class='video' loop="true" objectFit="cover" :src="item.src" :controls="false"></video></view>
</template><script>export default {props: ["item", "index"],name: "followPlayer",data() {return {isPlay: false};},onReady() {this.videoContext = uni.createVideoContext("myVideo", this)if (this.index == 0) {this.play()}},methods: {play() {if (this.isPlay === false) {this.videoContext.play()}this.isPlay = true},pause() {if (this.isPlay === true) {this.videoContext.pause()}this.isPlay = false}}}
</script><style>.followPlayer {width: 100%;height: 100%;}.video {width: 80%;height: 100%;z-index: 19;}
</style>

然后需要在 followList 中调用子组件 followPlayer 中方法

<template><view class="followList"><scroll-view style="height: 100%;" scroll-y="true" @scroll="scroll">......<view class="video-box"><follow-player ref="player" :index="index" :item="item"></follow-player><view class="music-box"><view class="music">今天好生气啊我好后悔搭理那条疯狗</view></view></view>......	</scroll-view></view>
</template><script>import followPlayer from './followPlayer.vue'var time = nullexport default {components: {followPlayer},props: ['list'],name: "followList",data() {return {index : 0};},methods: {scroll(res) {clearTimeout()time = setTimeout(()=>{const index = Math.floor((res.detail.scrollTop + 150) / 550)this.index = index},100)}},watch:{//只有index值发生改变才执行index(){if (this.index >= 0 && this.index < this.list.length) {this.$refs.player[this.index].play()}if ((this.index - 1) >= 0 && (this.index - 1) < this.list.length) {this.$refs.player[this.index - 1].pause()}if ((this.index + 1) >= 0 && (this.index + 1) < this.list.length) {this.$refs.player[this.index + 1].pause()}}}}
</script>
......

最后在每个视频上放一个播放或暂停的按钮

<template><view class="followPlayer"><video id="myVideo" class='video' loop="true" objectFit="cover" :src="item.src" :controls="false"></video><cover-view class="iconfont icon-bofang icon" @click="click"></cover-view></view>
</template>
<script>export default {......methods: {......click() {if (this.isPlay == true) {this.videoContext.pause()this.isPlay = false} else {this.videoContext.play()this.isPlay = true}}}}
</script><style>.......video {width: 80%;height: 100%;z-index: 19;position: relative;}.icon {position: absolute;bottom: 10px;right: 10px;color: #ffffff;font-size: 20px;}
</style>

查看最终效果：
在这里插入图片描述

这篇关于uniapp小视频项目：关注页面开发的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/982152。

相关文章

C语言小项目实战之通讯录功能

C语言小项目实战之通讯录功能

《C语言小项目实战之通讯录功能》：本文主要介绍如何设计和实现一个简单的通讯录管理系统,包括联系人信息的存储、增加、删除、查找、修改和排序等功能,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录功能介绍：添加联系人模块显示联系人模块删除联系人模块查找联系人模块修改联系人模块排序联系人模块源代码如下
阅读更多...
SpringBoot项目中Maven剔除无用Jar引用的最佳实践

SpringBoot项目中Maven剔除无用Jar引用的最佳实践

《SpringBoot项目中Maven剔除无用Jar引用的最佳实践》在SpringBoot项目开发中,Maven是最常用的构建工具之一,通过Maven,我们可以轻松地管理项目所需的依赖,而,... 目录1、引言2、Maven 依赖管理的基础概念2.1 什么是 Maven 依赖2.2 Maven 的依赖传递机
阅读更多...
Vue项目中Element UI组件未注册的问题原因及解决方法

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element
阅读更多...
基于Python开发电脑定时关机工具

基于Python开发电脑定时关机工具

《基于Python开发电脑定时关机工具》这篇文章主要为大家详细介绍了如何基于Python开发一个电脑定时关机工具,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 简介2. 运行效果3. 相关源码1. 简介这个程序就像一个“忠实的管家”，帮你按时关掉电脑，而且全程不需要你多做
阅读更多...
Java中的Opencv简介与开发环境部署方法

Java中的Opencv简介与开发环境部署方法

《Java中的Opencv简介与开发环境部署方法》OpenCV是一个开源的计算机视觉和图像处理库,提供了丰富的图像处理算法和工具,它支持多种图像处理和计算机视觉算法,可以用于物体识别与跟踪、图像分割与... 目录1.Opencv简介Opencv的应用2.Java使用OpenCV进行图像操作opencv安装j
阅读更多...
Python 中 requests 与 aiohttp 在实际项目中的选择策略详解

Python 中 requests 与 aiohttp 在实际项目中的选择策略详解

《Python中requests与aiohttp在实际项目中的选择策略详解》本文主要介绍了Python爬虫开发中常用的两个库requests和aiohttp的使用方法及其区别,通过实际项目案... 目录一、requests 库二、aiohttp 库三、requests 和 aiohttp 的比较四、requ
阅读更多...
SpringBoot项目启动后自动加载系统配置的多种实现方式

SpringBoot项目启动后自动加载系统配置的多种实现方式

《SpringBoot项目启动后自动加载系统配置的多种实现方式》：本文主要介绍SpringBoot项目启动后自动加载系统配置的多种实现方式,并通过代码示例讲解的非常详细,对大家的学习或工作有一定的... 目录1. 使用 CommandLineRunner实现方式：2. 使用 ApplicationRunne
阅读更多...
使用IntelliJ IDEA创建简单的Java Web项目完整步骤

使用IntelliJ IDEA创建简单的Java Web项目完整步骤

《使用IntelliJIDEA创建简单的JavaWeb项目完整步骤》：本文主要介绍如何使用IntelliJIDEA创建一个简单的JavaWeb项目,实现登录、注册和查看用户列表功能,使用Se... 目录前置准备项目功能实现步骤1. 创建项目2. 配置 Tomcat3. 项目文件结构4. 创建数据库和表5.
阅读更多...
Python项目打包部署到服务器的实现

Python项目打包部署到服务器的实现

《Python项目打包部署到服务器的实现》本文主要介绍了PyCharm和Ubuntu服务器部署Python项目,包括打包、上传、安装和设置自启动服务的步骤,具有一定的参考价值,感兴趣的可以了解一下... 目录一、准备工作二、项目打包三、部署到服务器四、设置服务自启动一、准备工作开发环境：本文以PyChar
阅读更多...
多模块的springboot项目发布指定模块的脚本方式

多模块的springboot项目发布指定模块的脚本方式

《多模块的springboot项目发布指定模块的脚本方式》该文章主要介绍了如何在多模块的SpringBoot项目中发布指定模块的脚本,作者原先的脚本会清理并编译所有模块,导致发布时间过长,通过简化脚本... 目录多模块的springboot项目发布指定模块的脚本1、不计成本地全部发布2、指定模块发布总结多模
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2