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。

相关文章

这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
Hadoop企业开发案例调优场景

Hadoop企业开发案例调优场景

需求 （1）需求：从1G数据中，统计每个单词出现次数。服务器3台，每台配置4G内存，4核CPU，4线程。 （2）需求分析： 1G / 128m = 8个MapTask；1个ReduceTask；1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务（4    3    3） HDFS参数调优 （1）修改：hadoop-env.sh export HDFS_NAMENOD
阅读更多...
如何用Docker运行Django项目

如何用Docker运行Django项目

本章教程，介绍如何用Docker创建一个Django，并运行能够访问。 一、拉取镜像 这里我们使用python3.11版本的docker镜像 docker pull python:3.11 二、运行容器 这里我们将容器内部的8080端口，映射到宿主机的80端口上。 docker run -itd --name python311 -p
阅读更多...
嵌入式QT开发：构建高效智能的嵌入式系统

嵌入式QT开发：构建高效智能的嵌入式系统

摘要： 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发，详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程，包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发，涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用，以及嵌入式 QT 与硬件设备的交互，包括输入输出设
阅读更多...
OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息，即可快速实现设备配网，是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递，利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力，实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后，即可发送相关配网数据。同时还支持与常规Sof
阅读更多...
如何在页面调用utility bar并传递参数至lwc组件

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件： 2.调用utility bar api的方式有两种： 方法一，通过lwc调用： import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca
阅读更多...
活用c4d官方开发文档查询代码

活用c4d官方开发文档查询代码

当你问AI助手比如豆包，如何用python禁止掉xpresso标签时候，它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来
阅读更多...
在cscode中通过maven创建java项目

在cscode中通过maven创建java项目

在cscode中创建java项目 可以通过博客完成maven的导入 建立maven项目 使用快捷键 Ctrl + Shift + P 建立一个 Maven 项目 1 Ctrl + Shift + P 打开输入框2 输入 "> java create"3 选择 maven4 选择 No Archetype5 输入 域名6 输入项目名称7 建立一个文件目录存放项目，文件名一般为项目名8 确定
阅读更多...
Linux_kernel驱动开发11

Linux_kernel驱动开发11

一、改回nfs方式挂载根文件系统         在产品将要上线之前，需要制作不同类型格式的根文件系统         在产品研发阶段，我们还是需要使用nfs的方式挂载根文件系统         优点：可以直接在上位机中修改文件系统内容，延长EMMC的寿命         【1】重启上位机nfs服务         sudo service nfs-kernel-server resta
阅读更多...
【区块链 + 人才服务】区块链集成开发平台 | FISCO BCOS应用案例

【区块链 + 人才服务】区块链集成开发平台 | FISCO BCOS应用案例

随着区块链技术的快速发展，越来越多的企业开始将其应用于实际业务中。然而，区块链技术的专业性使得其集成开发成为一项挑战。针对此，广东中创智慧科技有限公司基于国产开源联盟链 FISCO BCOS 推出了区块链集成开发平台。该平台基于区块链技术，提供一套全面的区块链开发工具和开发环境，支持开发者快速开发和部署区块链应用。此外，该平台还可以提供一套全面的区块链开发教程和文档，帮助开发者快速上手区块链开发。
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2