更改首页
This commit is contained in:
魏啾
181
components/l-barrage/l-barrage.vue
Normal file
181
components/l-barrage/l-barrage.vue
Normal file
@@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<view class="l-barrage">
|
||||
<block v-for="(item,index) in items" :key="index">
|
||||
<!-- #ifdef H5 -->
|
||||
<text v-if="item.display" class="aon" :style="{top: `${item.top}%`,color: item.color}">
|
||||
{{item.text}}
|
||||
</text>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifndef H5 -->
|
||||
<!-- <text v-if="item.display" class="aon"
|
||||
:style="{top: `${item.top}%`,color: item.color,
|
||||
animation: `mymove ${Number(item.time)}s linear forwards`
|
||||
}"
|
||||
>
|
||||
{{item.text}}
|
||||
</text> -->
|
||||
<view v-if="item.display" class="aon"
|
||||
style=" display: flex;justify-content: center;align-items: center; background-color: #000; padding:10rpx; border-radius: 10rpx;"
|
||||
:style="{top: `${item.top}%`,
|
||||
animation: `mymove ${Number(item.time)}s linear forwards`
|
||||
}">
|
||||
<image style="width: 50rpx; height: 50rpx;border-radius: 50%;" :src="avatar"
|
||||
mode="aspectFill"></image>
|
||||
<text style="color: #fff;">
|
||||
{{item.text}}
|
||||
</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let cycle;
|
||||
|
||||
// 弹幕字体颜色
|
||||
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 : color
|
||||
rgb.push(color)
|
||||
}
|
||||
return '#' + rgb.join('')
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'l-barrage',
|
||||
props: {
|
||||
minTime: {
|
||||
type: Number,
|
||||
default: 4
|
||||
},
|
||||
maxTime: {
|
||||
type: Number,
|
||||
default: 9
|
||||
},
|
||||
minTop: {
|
||||
type: Number,
|
||||
default: 8
|
||||
},
|
||||
maxTop: {
|
||||
type: Number,
|
||||
default: 16
|
||||
},
|
||||
avatar:{
|
||||
type:String,
|
||||
default:'@/static/1.gif'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
items: [],
|
||||
userInfo: uni.cache.get('userInfo'), //个人信息
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add(text = '', time = Math.ceil(Math.floor(Math.random() * (this.maxTime - this.minTime + 1) + this
|
||||
.minTime))) {
|
||||
this.items.push({
|
||||
text,
|
||||
time,
|
||||
top: Math.ceil(Math.random() * (this.maxTop - this.minTop + 1) + this.minTop),
|
||||
color: getRandomColor(),
|
||||
display: 1,
|
||||
});
|
||||
},
|
||||
start(items = []) {
|
||||
this.items = [];
|
||||
cycle && (clearInterval(cycle));
|
||||
let i = 0,
|
||||
len = items.length;
|
||||
|
||||
cycle = setInterval(() => {
|
||||
let time = 5;
|
||||
// #ifndef H5
|
||||
time = Math.ceil(Math.floor(Math.random() * (this.maxTime - this.minTime + 1) + this.minTime));
|
||||
// #endif
|
||||
|
||||
if (i < len) {
|
||||
this.add(items[i], time);
|
||||
i++;
|
||||
} else {
|
||||
clearInterval(cycle);
|
||||
setTimeout(() => {
|
||||
this.$emit("end", {});
|
||||
}, time * 1000)
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.aon {
|
||||
position: fixed;
|
||||
white-space: nowrap;
|
||||
|
||||
animation: mymove 5s linear forwards;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-timing-function: linear;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.l-barrage {
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
@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%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,41 +0,0 @@
|
||||
# 测试发现h5不支持
|
||||
## 如何使用
|
||||
```
|
||||
<template>
|
||||
<view class="barrage-test">
|
||||
<vastwu-barrage width="750rpx" height="1300rpx" ref="vBarrage"></vastwu-barrage>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
const list = ['模拟弹幕效果','宽度如要修改请留意动画是从750rpx到-100%','高度默认100%','随机颜色','随机速度','图标可设置','图标大小可控','可自定义高度轨道','高度轨道数组多长，一屏幕就能播多少列','高度不够不会显示','欢迎使用','不会重叠']
|
||||
import vastwuBarrage from '@/components/vastwu-barrage/vastwu-barrage.vue'
|
||||
export default {
|
||||
components:{vastwuBarrage},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
onLoad() {
|
||||
this.$refs.vBarrage.init(list)
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.barrage-test{
|
||||
background-color: #C0C0C0
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|参数|类型|默认|说明|
|
||||
|:-|:-:|-:|-:|
|
||||
|trackList|Array|[0,100,200,300,400,500,600,700,800,900,1000]|自定义弹幕轨道，值为距离容器顶部的距离，可根据图标高度自行调整|
|
||||
|icon|String||默认图标|
|
||||
|iconWidth|String|62rpx|图标宽度|
|
||||
|iconHeight|String|'86rpx'|图标高度|
|
||||
|minTime|Number|7|最短过渡时间|
|
||||
|maxTime|Number|10|最长过渡时间|
|
||||
|width|String|'100%'|容器宽度|
|
||||
|height|String|'100%'|容器高度|
|
||||
Reference in New Issue
Block a user