admin 管理员组

文章数量: 1086866

uniapp弹幕

效果图

barrage.vue

<template><view class="l-barrage"><block v-for="(item,index) in items" :key="index"><view v-if="item.display" class="aon" :style="{top: `${item.top}rpx`}"><view class="bbg"><image:src="item.sex == 0 ? '.png' : '.png'"mode="" class="bbg-head"></image><view class="bbg-phone">{{item.phone}}</view><view class="bbg-phone">{{item.prize}}</view><image :src="item.img" mode="" class="bbg-img"></image></view></view></block></view>
</template><script>let cycle;import { mathSub,mathMul,mathAdd } from '@/utils/mathUtils.js'// 弹幕字体颜色function getRandomColor() {let rgb = []for (let i = 0; i < 3; ++i) {let color = Math.floor(Math.random() * 256).toString(16)color = color.length == 1 ? '0' + color : colorrgb.push(color)}return '#' + rgb.join('')}export default {name: 'l-barrage',props: {minTime: {type: Number,default: 6},maxTime: {type: Number,default: 14},minTop: {type: Number,default: 10},maxTop: {type: Number,default: 40}},data() {return {items: [],}},methods: {add(item, time = Math.ceil(Math.floor(Math.random() * (this.maxTime - this.minTime +1) + this.minTime))) {// let op = mathAdd(mathMul(mathAdd(Math.floor(Math.random()*5) , 1),50),100)let op = mathAdd(mathMul(Number(item.top),50),100)this.items.push({prize:item.prize,//奖品名称phone:item.phone,//中奖者电话time,//时间top: op,//距离顶部高度// top: Math.ceil(Math.random() * (this.maxTop - this.minTop + 1) + this.minTop),display: 1,sex:item.sex,//中奖者性别img:item.prizeImg //奖品图片});},start(items = []) {this.items = [];cycle && (clearInterval(cycle));let i = 0,len = items.length;cycle = setInterval(() => {let time = 5;// #ifndef H5time = Math.ceil(Math.floor(Math.random() * (this.maxTime - this.minTime + 1) + this.minTime));// #endifif (i < len) {// this.add(items[i].phone, items[i].prize, items[i].sex, time);this.add(items[i], time);i++;} else {clearInterval(cycle);setTimeout(() => {this.$emit("end", {});}, time * 1000)}}, 500)}}}
</script><style lang="scss">.aon {position: absolute;white-space: nowrap;animation: mymove 10s linear forwards;animation-timing-function: linear;-webkit-animation-timing-function: linear;animation-fill-mode: forwards;height: 48rpx;padding: 0 1rpx;}.l-barrage {z-index: 3;width: 100%;position: absolute;}@keyframes mymove {from {left: 100%;}to {left: -200%;}}@-moz-keyframes mymove/* Firefox */{from {left: 100%;}to {left: -200%;}}@-webkit-keyframes mymove/* Safari and Chrome */{from {left: 100%;}to {left: -200%;}}@-o-keyframes mymove/* Opera */{from {left: 100%;}to {left: -200%;}}.bbg {height: 48rpx;border-radius: 24rpx;display: flex;align-items: center;background: linear-gradient(90deg, #FFBC78 0%, #ED7361 29%, #EB6262 57%, #A087F6 100%);padding-right: 20rpx;.bbg-head {width: 44rpx;height: 44rpx;border-radius: 50%;}.bbg-phone {color: #ECECEC;font-size: 24rpx;line-height: 24rpx;margin-left: 24rpx;}.bbg-img{width: 44rpx;height: 44rpx;border-radius: 50%;margin-left: 20rpx;}}
</style>

需要用到的页面

<!-- @end执行结束回调 -->
<barrage ref="lBarrage" @end="getWinActive"></barrage>

import barrage from './barrage.vue'
getWinActive(){let webList = this.getWinList()this.$refs.lBarrage.start(webList)
},
//winIndex一次展示几条弹幕
getWinList(winIndex=2){let phoneHead = [13,17,15,18,19] //电话号码开头let len = mathAdd(Math.floor(Math.random()*winIndex),1)let webList = []let prizeText = ['一发入魂','欧气三连','霸气五连','十连冲天']let lvText = ['普通','稀有','珍贵','尊享']let prizeImg = ['.jpg','.jpg','.jpg','.jpg','.png','.png','.png',]let prize = ['开中了【尊享级奖品】','开中了【珍贵级奖品】','开中了【稀有级奖品】']for(let i = 0;i<len;i++){let imgIndex = Math.floor(Math.random()*7)let sexIndex = Math.floor(Math.random()*10)let phoneIndex = Math.floor(Math.random()*5)let phoneLast = mathAdd(Math.floor(Math.random() * 8998),1000)let prizeIndex = Math.floor(Math.random()*4)let lvIndex = Math.floor(Math.random()*4)let prizeI = Math.floor(Math.random()*3)let obj = {sex:sexIndex % 2 == 0 ? 0 : 1,phone:`${phoneHead[phoneIndex]} **** ${phoneLast}`,prize: prize[prizeI],top:i,prizeImg:`${prizeI}.png`,}webList.push(obj)}return webList
},

本文标签： uniapp弹幕

版权声明：本文标题：uniapp弹幕 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1687464528a105493.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。