vue + uniapp实现手机横屏弹幕

原创

于 2023-01-05 12:01:44 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #uni-app #javascript

本文介绍如何利用Vue.js和UniApp框架实现手机横屏的弹幕效果。通过创建一个uniapp项目和Vue页面，结合CSS动画过渡技术，使文字弹幕能从屏幕右侧匀速滑动到左侧并进行循环播放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

实现这个功能，首先建一个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>