uniapp小程序实现弹幕功能

实现效果

实现原理

实现弹幕功能主要用的是css的animation 属性

animation 属性是一个简写属性，用于设置六个动画属性：

animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。

我做的是弹幕是有序弹幕，既三行数据，不同速率从右向左滚动，不会出现重叠

实现方式

主要页面代码：

<view :class="isPauseTop?'aonPause aon':' aon'" class="dmGroup top "><view class='dmItem' v-for="(item,index) in dmData" v-if="index<6" @click="pause(1)"><view class='dm'><view class='avatarBox'><image :src=' item.sex == 0 ? avatarBoy : avatarGirl ' class='avatar' mode='aspectFit'></image><image :src=' item.sex == 0 ? iconBoy : iconGirl ' class='sex' mode='aspectFit'></image></view><text class='content'>{{ item.content }}</text><view @click="dianzan(index,1)"><image :src="index==isZanIndex?'../static/img/wish/zan1.png':'../static/img/wish/zan.png'" class='icon good' mode='aspectFill'></image><text>{{ item.zanNumber }}</text></view></view></view></view>

css代码：

aon{position: fixed;white-space:nowrap;display: block;animation: mymove 15s linear forwards infinite;animation-timing-function: linear;-webkit-animation-timing-function: linear;animation-fill-mode: forwards;}@keyframes mymove{from{left: 0%;}to{left: -200%;}}@-moz-keyframes mymove /* Firefox */{from{left: 0%;}to{left: -200%;}}@-webkit-keyframes mymove /* Safari and Chrome */{from{left: 0%;}to{left: -200%;}}@-o-keyframes mymove /* Opera */{from{left: 0%;}to{left: -200%;}}

在用到animation之前那一行的数据需要全部设为display: inline-block;

参考的网址只有滑动，我加了点击后暂停动画，用于完成点赞的业务逻辑

点击弹幕暂停移动

css代码：

.aonPause{animation-play-state:paused !important;-webkit-animation-play-state:paused !important; /* Safari 和 Chrome */}

这只是一行的弹幕，如果想要加多几行弹幕，弹幕移动的速率不同，就动态改变animation的属性
没想到吧，实现过程就是这么简单

uniapp小程序实现弹幕功能相关推荐

uniapp小程序微信支付功能
目录字段说明前置工作获取openid 微信支付报错问题 uniapp 开发小程序需要实现微信支付功能,下面对相关业务进行说明. 字段说明 AppID:小程序的身份证,微信客户端用来确认你的小程 ...
uniapp小程序消息订阅功能
场景描述微信充电小程序希望在用户充电时间结束,或者用户的充电完成时.通过微信公众号的推送信息的方式,告知用户充电进程. 需求实现基础API: 实现上面的需求用到API有:uni.getSettin ...
uniapp微信小程序拨打电话功能
uniapp微信小程序拨打电话功能先上代码,可以直接拿过去用. <button @click="playphone()">< ...
uni-app 小程序使用腾讯地图完成搜索功能
前言使用uni-app开发小程序时候使用腾讯地图原生SDK是,要把原生写法转成vue写法在这记录一下. 我们需要注意的是使用高德地图时我们不仅要引入SDK,还要再uni-app中配置允许使用. 由于 ...
微信小程序：常用功能8——小程序视频组件中的弹幕功能
微信小程序:常用功能8--小程序视频组件中的弹幕功能昨天我们刚说了微信小程序的视频组件和分享功能微信小程序:常用功能8--在小程序添加视频组件,并将页面分享到朋友圈,今天想把弹幕功能说一下,但是感觉 ...
uni-app小程序使用客服功能和获取客服聊天记录demo
demo代码如下: <template> <view class="content"> <button open-type=& ...
uniapp小程序迁移到TS
uniapp小程序迁移到TS 我一直在做的小程序就是山科小站也已经做了两年了,目前是用uniapp构建的,在这期间也重构好几次了,这次在鹅厂实习感觉受益良多,这又得来一次很大的重构,虽然小程序功能 ...
java基本微信小程序的快递代收派送系统 uniapp小程序
随着时代的发展,人们生活的节奏越来越快,但是快递已经成为人们生活中的一个重要组成部分,基本每个人都会收发快递,如果这些事情全部都到快递站点进行处理,是很浪费时间和精力的一件事情.为了能够让快递代收和派 ...
uniapp小程序扫二维码登录uniapp h5
uniapp扫码登录功能一.测试环境:uniapp小程序 uniapp h5 二.实现思路三.实现步骤一.测试环境:uniapp小程序 uniapp h5 二.实现思路 1.手机登录uniapp ...

uniapp小程序实现弹幕功能

实现效果

实现原理

实现方式

主要页面代码：

css代码：

点击弹幕暂停移动

uniapp小程序实现弹幕功能相关推荐

最新文章

热门文章