弹幕

pages/index/index.vue

@@ -1,285 +1,350 @@
 <template>
-	<view class="container">
-		<image class="headImg" mode="aspectFill" :src="$fileUrl() + '/homeHead.jpeg'"></image>
-		<view class="headBarrage">
-			<l-barrage :data="barrageData" :defer="1" :loopCount="6">
-				<!-- 自定义每条弹幕样式 content 为你传入的数据-->
-				<template #default="{content}">
-					<view class="bullet">{{content.text}}</view>
-				</template>
-			</l-barrage>
-		</view>
+  <view class="container">
+    <image
+      class="headImg"
+      mode="aspectFill"
+      :src="$fileUrl() + '/homeHead.jpeg'"
+    />
+    <view class="headBarrage">
+      <view class="barrage-container">
+        <view
+          v-for="(item, index) in barrageData"
+          :key="index"
+          class="barrage-item"
+          :style="item.style"
+        >
+          {{ item.text }}
+        </view>
+      </view>
+    </view>
 
-		<view class="tabs">
-			<view class="tab">
-				<image :src="$fileUrl() + '/Frame3.png'" alt="">
-					<span>全部</span>
-			</view>
-			<view class="tab" @click="$navigateTo('/pages/excellentValue/excellentValue')">
-				<image :src="$fileUrl() + '/Frame4.png'" alt="">
-					<span>超值挑战</span>
-			</view>
-			<view class="tab">
-				<image :src="$fileUrl() + '/Frame2.png'" alt="">
-					<span>拍卖专区</span>
-			</view>
-			<view class="tab">
-				<image :src="$fileUrl() + '/Frame1.png'" alt="">
-					<span>VIP福利</span>
-			</view>
-		</view>
-		<view class="buttons">
-			<view class="left">
-				<image :src="$fileUrl() + '/button3.png'" @click="toInvite"></image>
-			</view>
-			<view class="right">
-				<image :src="$fileUrl() + '/button1.png'"></image>
-				<image :src="$fileUrl() + '/button2.png'"
-					@click="$navigateTo('/pages/raffle/raffle')"></image>
-			</view>
-		</view>
-		<view class="list-title">
-			- 热门推荐 -
-		</view>
-		<view class="list">
-			<view class="ka" v-for="(item, index) in kaList">
-				<view class="top">
-					<image mode="aspectFit" :src="$fileUrl() + '/ka.jpeg'"></image>
-				</view>
-				<view class="ka-info">
-					<view class="ka-name">
-						宝可梦简中原盒拆拆乐
-					</view>
-					<view class="row">
-						<uni-tag text="创意热销" inverted type="default"></uni-tag>
-						<view class="money">
-							¥9.9
-						</view>
-					</view>
-				</view>
-			</view>
-		</view>
-	</view>
+    <view class="tabs">
+      <view class="tab">
+        <image :src="$fileUrl() + '/Frame3.png'" alt="" />
+        <span>全部</span>
+      </view>
+      <view
+        class="tab"
+        @click="$navigateTo('/pages/excellentValue/excellentValue')"
+      >
+        <image :src="$fileUrl() + '/Frame4.png'" alt="" />
+        <span>超值挑战</span>
+      </view>
+      <view class="tab">
+        <image :src="$fileUrl() + '/Frame2.png'" alt="" />
+        <span>拍卖专区</span>
+      </view>
+      <view class="tab">
+        <image :src="$fileUrl() + '/Frame1.png'" alt="" />
+        <span>VIP福利</span>
+      </view>
+    </view>
+    <view class="buttons">
+      <view class="left">
+        <image :src="$fileUrl() + '/button3.png'" @click="toInvite" />
+      </view>
+      <view class="right">
+        <image :src="$fileUrl() + '/button1.png'" />
+        <image
+          :src="$fileUrl() + '/button2.png'"
+          @click="$navigateTo('/pages/raffle/raffle')"
+        />
+      </view>
+    </view>
+    <view class="list-title"> - 热门推荐 - </view>
+    <view class="list">
+      <view class="ka" v-for="(item, index) in kaList">
+        <view class="top">
+          <image mode="aspectFit" :src="$fileUrl() + '/ka.jpeg'" />
+        </view>
+        <view class="ka-info">
+          <view class="ka-name"> 宝可梦简中原盒拆拆乐 </view>
+          <view class="row">
+            <uni-tag text="创意热销" inverted type="default"></uni-tag>
+            <view class="money"> ¥9.9 </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
-	import {
-		messageListApi
-	} from "@/api/common.js"
-	export default {
-		data() {
-			return {
-				kaList: 6,
-				messageList: [],
-				barrageData: [],
-				barrageIndex: 0,
-				timeOut: null,
-				interval: null,
-				params: {
-					limit: 20,
-					page: 1,
-				},
-				total: null,
-			}
-		},
-		onLoad(query) {
-			if (query.inviteId) {
-				getApp().globalData.inviteId = query.inviteId;
-			} else {
-				const scene = decodeURIComponent(query.scene)
-				let inviteId = scene.split("=")[1]
-				console.log(inviteId, 'inviteId')
-				getApp().globalData.inviteId = inviteId;
-			}
-		},
-		onShow() {
-			this.getMessage()
-			this.interval = setInterval(() => {
-				console.log('重复获取消息')
-				this.barrageIndex = 0
-				this.getMessage()
-				// let num = this.params.page * this.params.limit
-				// if (this.total == null || this.total > num) {
-				// 	console.log('获取消息接口')
-				// 	// this.params.page += 1
-				// 	this.barrageIndex = 0
-				// 	this.getMessage()
-				// }
-			}, 60000)
-		},
-		onHide() {
-			clearInterval(this.interval)
-		},
-		methods: {
-			getMessage() {
-				messageListApi(this.params).then(res => {
-					this.messageList = res.data.list
-					this.total = res.data.total
-					this.initBarrage()
-				})
-			},
-			// 初始化弹幕
-			initBarrage() {
-				let _this = this
-				// console.log(_this.barrageIndex, '_this.barrageIndex')
-				if (_this.messageList.length > 0) {
-					_this.timeOut = setTimeout(() => {
-						_this.barrageData.push({
-							text: _this.messageList[_this.barrageIndex].content
-						})
-						// console.log(_this.barrageData, '_this.barrageData')
-						_this.barrageIndex += 1
-						clearTimeout(_this.timeOut)
-						if (_this.barrageIndex > _this.messageList.length - 1) {
-							_this.barrageIndex = 0
-						} else {
-							_this.initBarrage()
-						}
-					}, 1000)
-				}
-			},
-			// 发送弹幕
-			sendingBarrage() {
-				let messageList = this.messageList
-				
-			},
-			toInvite() {
-				wx.navigateTo({
-					url: '/pages/invite/invite'
-				})
-			}
-		}
-	}
+import { messageListApi } from '@/api/common.js'
+export default {
+  data() {
+    return {
+      timer: null,
+      kaList: 6,
+      messageList: [],
+      barrageData: [],
+      barrageIndex: 0,
+      timeOut: null,
+      interval: null,
+      params: {
+        limit: 20,
+        page: 1,
+      },
+      total: null,
+      containerWidth: 0,
+      usedTops: [],
+    }
+  },
+  onLoad(query) {
+    if (query.inviteId) {
+      getApp().globalData.inviteId = query.inviteId
+    } else {
+      const scene = decodeURIComponent(query.scene)
+      let inviteId = scene.split('=')[1]
+      console.log(inviteId, 'inviteId')
+      getApp().globalData.inviteId = inviteId
+    }
+    console.log(this.$refs)
+  },
+  onShow() {
+    this.getMessage()
+    this.interval = setInterval(() => {
+      console.log('重复获取消息')
+      this.barrageIndex = 0
+      this.getMessage()
+      // let num = this.params.page * this.params.limit
+      // if (this.total == null || this.total > num) {
+      // 	console.log('获取消息接口')
+      // 	// this.params.page += 1
+      // 	this.barrageIndex = 0
+      // 	this.getMessage()
+      // }
+    }, 60000)
+    setTimeout(() => {
+      this.launchBarrage()
+    }, 2000)
+  },
+  onHide() {
+    clearInterval(this.interval)
+    clearInterval(this.timer)
+  },
+  methods: {
+    getMessage() {
+      messageListApi(this.params).then((res) => {
+        this.messageList = res.data.list
+        this.total = res.data.total
+        this.initBarrage()
+      })
+    },
+    launchBarrage() {
+      if (this.timer) {
+        clearInterval(this.timer)
+      }
+      this.timer = setInterval(() => {
+        this.barrageData.forEach((barrage, index) => {
+          if (!barrage.tag) {
+            barrage.tag = true
+            barrage.right = -400
+            barrage.top = this.randomTop()
+            barrage.style = `display: block; top: ${barrage.top}px; right: ${barrage.right}px;`
+          } else {
+            barrage.right = parseInt(barrage.right) + 2
+            barrage.style = `display: block; top: ${barrage.top}px; right: ${barrage.right}px;`
+          }
+        })
+      }, 20)
+    },
+    // 初始化弹幕
+    initBarrage() {
+      // console.log(this.barrageIndex, 'this.barrageIndex')
+      if (this.messageList.length > 0) {
+        this.timeOut = setTimeout(() => {
+          let barrage = { text: this.messageList[this.barrageIndex].content }
+          this.$set(barrage, 'right', -400)
+          this.$set(barrage, 'top', this.randomTop())
+          this.$set(barrage, 'tag', false)
+          this.barrageData.push(barrage)
+
+          this.barrageIndex += 1
+          clearTimeout(this.timeOut)
+          if (this.barrageIndex > this.messageList.length - 1) {
+            this.barrageIndex = 0
+          } else {
+            this.initBarrage()
+          }
+        }, 1000)
+      }
+    },
+    // 发送弹幕
+    sendingBarrage() {
+      let messageList = this.messageList
+    },
+    randomTop() {
+      // return Math.floor(Math.random() * 150)
+
+      // 往前5个不重复top值
+      let top = 0
+      this.usedTops.push(top)
+      do {
+        top = Math.floor(Math.random() * 6) * 30 // 生成0, 30, 60, 90, 120的随机值
+      } while (this.usedTops.slice(-4).includes(top))
+
+      this.usedTops.push(top)
+
+      return top
+    },
+
+    toInvite() {
+      wx.navigateTo({
+        url: '/pages/invite/invite',
+      })
+    },
+  },
+}
 </script>
 
 <style scoped lang="scss">
-	.container {
-		/* padding: 20px; */
-		font-size: 14px;
-		line-height: 24px;
-	}
+.barrage-container {
+  width: 100%;
+  height: 180px;
+  position: relative;
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, 0.2); /* 背景色，可根据需要调整 */
+}
+
+.barrage-item {
+  color: #fff;
+  padding: 5px 10px;
+  font-size: 14px;
+  line-height: 30px;
+  position: absolute;
+  white-space: nowrap;
+  display: none;
+  border-radius: 15px;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+.container {
+  /* padding: 20px; */
+  font-size: 14px;
+  line-height: 24px;
+}
 
-	.headImg {
-		height: 180px;
-		width: 100%;
-	}
-	.headBarrage {
-		height: 180px;
-		width: 100%;
-		position: absolute;
-		top: 0;
-	}
+.headImg {
+  height: 180px;
+  width: 100%;
+}
+.headBarrage {
+  height: 180px;
+  width: 100%;
+  position: absolute;
+  top: 0;
+}
 
-	.tabs {
-		display: flex;
-		justify-content: space-around;
-		margin-top: 10px;
+.tabs {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 10px;
 
-		>.tab {
-			width: 20%;
-			display: flex;
-			flex-direction: column;
-			justify-content: center;
-			align-items: center;
+  > .tab {
+    width: 20%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 
-			>image {
-				width: 40px;
-				height: 40px;
-			}
-		}
-	}
+    > image {
+      width: 40px;
+      height: 40px;
+    }
+  }
+}
 
-	.buttons {
-		margin-top: 5px;
-		padding: 10px;
-		display: flex;
-		justify-content: space-between;
+.buttons {
+  margin-top: 5px;
+  padding: 10px;
+  display: flex;
+  justify-content: space-between;
 
-		>.left {
-			width: calc(50vw - 15px);
-			height: 40vw;
+  > .left {
+    width: calc(50vw - 15px);
+    height: 40vw;
 
-			image {
-				width: 100%;
-				height: 100%;
-			}
-		}
+    image {
+      width: 100%;
+      height: 100%;
+    }
+  }
 
-		>.right {
-			width: calc(50vw - 15px);
-			height: 40vw;
-			display: flex;
-			flex-direction: column;
-			justify-content: space-between;
-			align-items: center;
+  > .right {
+    width: calc(50vw - 15px);
+    height: 40vw;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
 
-			image {
-				width: 100%;
-				height: calc(50% - 5px);
-			}
-		}
-	}
+    image {
+      width: 100%;
+      height: calc(50% - 5px);
+    }
+  }
+}
 
-	.list-title {
-		font-size: 16px;
-		font-weight: 600;
-		text-align: center;
-		padding: 10px;
-	}
+.list-title {
+  font-size: 16px;
+  font-weight: 600;
+  text-align: center;
+  padding: 10px;
+}
 
-	.list {
-		display: grid;
-		grid-template-columns: 1fr 1fr;
-		grid-gap: 10px;
-		padding: 10px;
+.list {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 10px;
+  padding: 10px;
 
-		.ka {
-			width: calc(50vw - 15px);
-			box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.1);
-			border-radius: 10px;
-			// height: 60vw;
+  .ka {
+    width: calc(50vw - 15px);
+    box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    // height: 60vw;
 
-			.top {
-				// height: 60vw;
-				background: linear-gradient(180deg, #FAF1A7 0%, #FFE456 100%);
-				text-align: center;
-				display: flex;
-				justify-content: center;
+    .top {
+      // height: 60vw;
+      background: linear-gradient(180deg, #faf1a7 0%, #ffe456 100%);
+      text-align: center;
+      display: flex;
+      justify-content: center;
 
-				image {
-					width: 35vw;
-					height: 50vw;
-				}
-			}
+      image {
+        width: 35vw;
+        height: 50vw;
+      }
+    }
 
-			.ka-info {
-				padding: 10px;
+    .ka-info {
+      padding: 10px;
 
-				.ka-name {
-					font-size: 15px;
-					font-weight: 600;
-				}
+      .ka-name {
+        font-size: 15px;
+        font-weight: 600;
+      }
 
-				.row {
-					margin-top: 5px;
-					display: flex;
-					justify-content: space-between;
+      .row {
+        margin-top: 5px;
+        display: flex;
+        justify-content: space-between;
 
-					.money {
-						font-size: 16px;
-						font-weight: 600;
-						color: #FF2C43;
-					}
-				}
-			}
-		}
-	}
-	.bullet {
-		height: 30px;
-		line-height: 30px;
-		padding: 0 10px;
-		border-radius: 15px;
-		background-color: rgba(0, 0, 0, 0.3);
-		color: #fff;
-	}
-</style>
+        .money {
+          font-size: 16px;
+          font-weight: 600;
+          color: #ff2c43;
+        }
+      }
+    }
+  }
+}
+.bullet {
+  height: 30px;
+  line-height: 30px;
+  padding: 0 10px;
+  border-radius: 15px;
+  background-color: rgba(0, 0, 0, 0.3);
+  color: #fff;
+}
+</style>