微信小程序简易弹幕组件(uniapp)

该博客介绍了如何在微信小程序中使用uni-app开发一个弹幕组件。通过利用CSS3动画实现弹幕从屏幕右侧滚动到左侧的效果,并讨论了如何处理多行弹幕避免重叠,以及解决弹幕追击问题的策略。
摘要由CSDN通过智能技术生成

最终效果图如下:
在这里插入图片描述

1. 弹幕从弹幕区域外的右边滚动到左边,那么每条弹幕的实际滚动路径长度为当前弹幕的实际宽度+整个弹幕区域的宽度

组件代码如下:

<template>
	<view class="l-barrage">
		<block v-for="(item,index) in items" :key="index">
	      	<view
		        class="barrage-item"
		        :id="item.id"
		        :data-duration="item.duration"
		        :data-trackindex="item.trackIndex"
		        :style="{
   
		          top: `${
     item.top}`,
		          'animation-duration': `${
     Number(item.duration)}s`}"
		        @animationend="handleEnd(item.id, item.trackIndex)">
		        {
   {
   item.text}}
	     	</view>
		</block>
    	<!-- 计算每条弹幕实际的宽度 -->
    	<view class="bullet-container">{
   {
   currentBullet}}</view>
	</view>
</template>
2. 本例中弹幕区域的宽度为当前屏幕的宽度。弹幕的滚动效果使用css3的animation实现,使用translateX来实现水平位移的变化。弹幕使用绝对定位初始时在屏幕的最左边(left: 0),动画开始时弹幕在屏幕外的右边,那么相对于弹幕区域的水平位移为100vw,动画结束时要滚动到屏幕外的左边,水平位移正好为负的当前弹幕的实际宽度。

样式代码如下:

<style lang="scss">
	.l-barrage {
   
		position: relative;
		z-index: 3;
		width: 100vw;        // 弹幕区域的宽度为屏幕的宽度
	  	height: 26vh;       // 这里的高度可以根据实际需要显示弹幕的行数来设定,如每行高度为24px,那么我们可以设置大于
		
		.barrage-item {
   
			position: absolute;
		  	left: 0;
			padding: 0 16rpx;
			white-space: nowrap;
			color: #fff;
			font-size: 30rpx; 
			background-color: rgba(#fff, .16);
			border-radius: 20rpx;
			animation: mymove 10s linear forwards;
		}
		
		.bullet-container {
   
		  position: absolute;
		  right: 9999rpx;
		  visibility: hidden;
		  white-space: nowrap;
		}
	}
	
	@keyframes mymove
	{
   
		from{
   transform: translateX(100vw);}
		to{
   transform: translateX(-100%);}
	}

	@-moz-keyframes mymove /* Firefox */
	{
   
		from{
   transform: translateX(100vw);}
		to{
   transform: translateX(-100%);}
	}

	@-webkit-
  • 5
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
微信小程序实时弹幕功能是指在小程序中用户可以实时发送和接收消息弹幕的功能。用户可以通过输入框输入弹幕内容,发送到服务器,然后其他用户可以实时接收到这些弹幕,从而形成实时的弹幕效果。 实现微信小程序实时弹幕功能的关键是前后端的数据交互和实时通信。首先,在小程序中,我们需要一个输入框和发送按钮,用户可以在输入框中输入弹幕内容,并通过点击发送按钮将弹幕发送到服务器。其次,服务器需要接收到这些弹幕消息,并即刻推送给其他用户。这可以通过使用 WebSocket 进行实时通信来实现。 在小程序端,我们可以使用小程序提供的 WebSocket 接口,与服务器建立 WebSocket 连接。当用户发送弹幕时,将弹幕消息通过 WebSocket 发送给服务器。服务器接收到弹幕消息后,可以将消息广播给所有已经建立 WebSocket 连接的用户。其他用户通过监听 WebSocket 的消息事件,即可接收到服务器发送的弹幕消息,并将其实时展示在屏幕上。 为了保证弹幕的实时性和流畅性,我们需要在服务器端对弹幕消息进行处理和管理。比如设置弹幕消息的过期时间,只展示最新的 N 条弹幕,避免消息过多造成界面混乱。同时,为了避免弹幕内容不合法或者恶意攻击,需要对用户输入进行过滤和校验。 总结来说,微信小程序实时弹幕功能通过前后端的数据交互和实时通信实现。用户在小程序中发送弹幕消息,服务器接收并在实时广播给其他用户,实现实时弹幕的效果。这个功能可以让用户之间更好地互动和沟通,提升小程序的用户体验。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值