vue + uniapp实现手机横屏弹幕

小程序，手持弹幕，输入文字之后，弹幕从右往左匀速划过，再次循环。

实现这个功能，首先建一个uniapp项目，建一个vue页面

<template><view class="danmu_bg"><view class="barrage-box" @click="hideBottom"><view class="text">{{barrage}}</view></view><view class="bottmm_barrage_send" v-if="!isLocked"><view class="unlock" @click="lock"><image :src="unlockImgSrc" mode=""></image></view><view class="barrage_input"><input type="text" placeholder="哈喽!" @input="changeBarrageText" v-model="inputValue"></view></view><view class="bottom_barrage_locked" v-else @click="unlock"><uni-icons type="locked-filled" size="30" color="#fff"></uni-icons></view></view>
</template><script>export default {data() {return {clickCount: 0, // 点击屏幕的次数barrage: '哈喽！', // 手机屏幕的弹幕isLocked: false, // 是否锁住了弹幕发送区unlockImgSrc: '../../static/img/icons/unlock.png', // unlock图标地址inputValue: '', // 输入框中的值};},onLoad() {// 加载分享菜单this.loadingShareMenu();},methods: {// 点击屏幕，底部消失或出现hideBottom(){this.clickCount++;if(this.clickCount % 2 === 1){// 奇数，底部消失this.isLocked = true;}else{// 偶数，底部出现this.isLocked = false;}},// 输入弹幕内容时，实时改变弹幕changeBarrageText(){this.barrage = this.inputValue;},// 点击unlock图标，控制输入框消失lock(){this.isLocked = true;},// 点击lock锁图标，控制输入框显示unlock(){this.isLocked = false;},// 加载分享菜单loadingShareMenu() {wx.showShareMenu({withShareTicket: true,//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击menus: ["shareAppMessage", "shareTimeline"]})},}}
</script><style lang="less" scoped>.danmu_bg {width: 100%;min-height: 100vh;background-color: #000;.barrage-box {width: 100vh;height: 100vw;transform-origin: 50vw 50vw;transform: rotate(90deg);white-space: nowrap;display: flex;justify-content: center;align-items: center;background-color: #000;overflow: hidden;animation: aniShake 0.5s linear infinite;/* 抖动字幕效果 */@keyframes aniShake {0%,33% {text-shadow: 3px -3px 0px #FE008E, -5px 5px 0px #00FFFF;}34%,66% {text-shadow: 5px -5px 0px #FE008E, -3px 3px 0px #00FFFF;}67%,100% {text-shadow: 3px -3px 0px #00FFFF, -5px 5px 0px #FE008E;}}.text {width: 100%;font-size: 100px;color: #FFF;animation: aniMove 4s linear infinite;animation-fill-mode: forwards;}/* 文字滚动 */@keyframes aniMove {0% {transform: translateX(100%);}100% {transform: translateX(-100%);}}}.bottmm_barrage_send{width: 100%;height: 50px;position: absolute;left: 0;bottom: 0;background-color: #FFF;display: flex;justify-content: space-evenly;border-radius: 5px;align-items: center;.unlock{width: 7%;image{width: 20px;height: 20px;}}.barrage_input{width: 80%;input{height: 40px;background-color: #f1f1f1;border-radius: 8px;padding-left: 10px;}}}.bottom_barrage_locked{width: 30px;height: 30px;position: absolute;left: 20px;bottom: 20px;}}
</style>

依托于css 动画过渡

vue + uniapp实现手机横屏弹幕相关推荐

uniapp获取手机可接收的所有的WiFi名称与信号强度
文章目录前言一.代码及注释总结前言关键词:HBuilder uniapp wifi RSSI SSID 最近做项目有一个需求,要求用HBuilder uniapp做一个app显示手机可接收的 ...
手机屏幕弹幕纵向滚动，添加弹幕实时滚动html demo
手机屏幕弹幕纵向滚动,添加弹幕实时滚动 transform 可在不改变页面dom结构的前提下进行实时动画,比传统的通过top的高度来做动画性能要高出很多. requestAnimationFrame ...
阿泽CSS踩坑系列（二）-解决安卓端手机横屏后图片比例失调，需要刷新才能恢复正常的问题。（华为手机浏览器）
问题描述:开发个人博客摄影版块的时候,横屏时图片出现了拉伸,点击下一张图片再点回来就能恢复正常.(理想状态:保持宽高比,当高度或者宽度达到最大时,停止缩放) 我们看一下竖屏时的图片: 嗯,完美,没有什 ...
vue uniapp 微信小程序搜索下拉框模糊搜索
vue uniapp 微信小程序搜索下拉框模糊搜索话不多说直接贴代码 template <template><view class="index"> ...
使用VUE(uniapp)和Spring boot做的小游戏远古帝国
1.游戏介绍代码已经从github迁移到gitee 欢迎大家start,本游戏ui和游戏思路完全参考原版游戏远古帝国,但是代码完全自己开发,和原本没有任何关系,本游戏永远不会盈利,做这个游戏只是处 ...
Flutter 如何禁止手机横屏[Flutter专题62]
问题引出群友发来问题: Flutter 怎么禁止横屏显示呀,网上说的几个方法都没有效群友遇到问题,就要群友去帮助,这样,这个群就有了存在的意义. 正文在一些特定的 App 里,我们不希望手机横 ...
关于手机横屏打开相机或者相册闪退解决方案
今天遇到一个需求就是在手机横屏的时候要打开相册相机,但是在打开的手就报错,经过一上午的查资料,看文档,知道了问题所在,原来UIImagePickerController 只支持竖屏解决思路 1,让U ...
uni-app 获取手机设备各项信息
uni-app 获取手机各项信息直接使用uni.getSystemInfo 官方文档:地址参考代码我这里的代码经过测试是可以获取到Android设备的信息的 <template>&l ...
仿比心源码，uniApp自适应手机屏幕高度
仿比心源码,uniApp自适应手机屏幕高度 // 获取屏幕高度用res.screenHeight let _this = this; //uni.getSystemInfoSync异步接口uni.ge ...

vue + uniapp实现手机横屏弹幕

vue + uniapp实现手机横屏弹幕相关推荐

最新文章

热门文章