效果如下：
video(19)
代码实现如下：
<template>
<view class="taoquan">
<view class="scroll-box">
<view class="scroll-wrapper" :class="{'to-move':toMove}"
:style="{'--offset': -((goodsWidth>130?129:goodsWidth)*2*(goods.length))+'rpx'}" id='boxWrapper'>
<!-- 10 个 :style="{'--offset': -(130*20)+'rpx'}" 补前三个-->
<!-- 9 个 :style="{'--offset': -(130*18)+'rpx'}" 补前三个-->
<!-- 8 个 :style="{'--offset': -(130*16)+'rpx'}" 补前三个-->
<!-- <view class="scroll-wrapper" :class="{'to-move':toMove}"
:style="{'--offset': -2580+'rpx'}" id='boxWrapper'> -->
<view class="scroll-item" v-for="(item,index) in goods" :key="item.id">
<image :src="item.img" alt="" />
<view class="model">
第{
{
index+1}}个
</view>
</view>
<view class="scroll-item" v-for="(item,index) in goods.slice(0,3)" :key="item">
<image :src="item.img" alt="" />
<view class="model">
第{
{
index+1}}个
</view>
</view>
</view>
</view>
<view class="btn-satus">
<!-- 圈圈 和 丢圈圈的人 -->
<view class="quanquan-box">
<view class="quanquan" :class="{'go-move':moveStyle}">
</view>
<view class="quanquan-people">
</view>
</view>
<!-- 去订阅 -->
<!-- #ifdef MP-WEIXIN -->
<view @click="toOrder" class="start-btn btn" v-if="status == 0">
<view class="top">
订阅开始提醒
</view>
<view class="bot">
2023/4/12 0点开始
</view>
</view>
<!-- #endif -->
<!-- 去报名 -->
<view @click="toSignUp" class="start-btn btn" v-if="status == 1">
<view class="top to-sign-up">
立即报名
</view>
</view>
<!-- 开始游戏 -->
<view @click="startGameToMoveCar" class="start-btn btn" v-else-if="status == 2">
<view class="top">
点击开始游戏
</view>
<view class="bot">
还有{
{
quoitTimes}}次机会
</view>
</view>
<view @click="toTaoQuan" class="taoquan-btn btn" :class="{'tao-hover': moveStyle}" v-else-if="status == 3">
<view class="top">
点我套圈
</view>
<view class="bot">
还剩{
{
quoitNum}}个圈
</view>
</view>
</view>
</view>
</template>
<script>
import api from '@/public/api/index'
export default {
components: {
},
data() {
return {
activityId: 0,
activityInfo: {
},
quoitTimes: 0,
status: 2, // 1 立即报名，2 开始游戏，3是丢出圈圈
toMove: false, // 轨道移动
moveStyle: false, // 圈圈移动
timer: null, // 定时器
quoitNum: 5, // 还剩几个圈
goodsWidth:130,
goods: [{
id: 1,
img: './img/quoitgame/default-car.png'
},
{
id: 2,
img: './img/quoitgame/default-car.png'
},
{
id: 3,
img: './img/quoitgame/default-car.png'
},
{
id: 4,
img: './img/quoitgame/default-car.png'
},
{
id: 5,
img: './img/quoitgame/default-car.png'
},
{
id: 6,
img: './img/quoitgame/default-car.png'
},
{
id: 7,
img: './img/quoitgame/default-car.png'
},
{
id: 8,
img: './img/quoitgame/default-car.png'
},
// {
// id: 9,
// img: './img/quoitgame/default-car.png'
// },
// {
// id: 10,
// img: './img/quoitgame/default-car.png'
// }
]
};
},
onLoad(options) {
},
onHide() {
},
onUnload() {
},
onShow() {
console.log("999999999");
const query = uni.createSelectorQuery().in(this);
this.$nextTick(()=>{
query.select('#boxWrapper .scroll-item').boundingClientRect(data => {
console.log("3333333333333333333333333" + JSON.stringify(data));
this.goodsWidth = data.width
}).exec();
})
},
methods: {
// 去订阅
async toOrder() {
},
// 去报名
toSignUp() {
},
// 点击开始游戏 去 移动轨道
startGameToMoveCar() {
this.toMove = true
this.status = 3
},
// 获取信息
async getBaseInfo() {
let res = await api.quoitBaseInfo({
activityId: this.activityId
})
if (res.code == 200) {
this.activityInfo = res.data
this.quoitTimes = res.data.remainCount
this.quoitNum = res.data.circlesCount
}
},
// 减少套圈次数和圈圈数量
async quoitTimesDel(params) {
let res = await api.quoitTimes({
activityId: this.activityId,
...params
})
// 更新完机会 和 套没套中的情况，来给次数和圈圈数量重新赋值
this.getBaseInfo()
},
// 去套圈
toTaoQuan() {
this.moveStyle = true
const query = uni.createSelectorQuery().in(this);
this.timer = setTimeout(() => {
// this.toMove = false
this.moveStyle = false
this.quoitNum--
if (this.quoitNum == 0) {
// 滚动停止
this.toMove = false
// 圈圈到 0 重置按钮状态
this.status = 2
// 重置圈圈的数量
this.quoitNum = 5
}
query.select('#boxWrapper').boundingClientRect(data => {
console.log("得到布局位置信息" + JSON.stringify(data));
// console.log("节点离页面顶部的距离为" + data.top);
let moveleft = Math.abs(data.left)
if (data.left < 0) {
moveleft = Math.abs(data.left)
}
let taoZhongflag = false // 默认没套中
let yu = parseInt(moveleft % (this.goodsWidth));
let shang = parseInt(moveleft / ((this.goodsWidth)));
let firstWidth = this.goodsWidth/7;
let lastWidth = this.goodsWidth - this.goodsWidth/7;
if ((yu >= 0 && yu <= firstWidth) || yu >= (lastWidth) && yu < this.goodsWidth) {
taoZhongflag = true
uni.showToast({
title: `恭喜套中!`,
duration: 1000,
icon:'none'
})
}else{
taoZhongflag = false
uni.showToast({
title: `没套中`,
icon:'none'
})
}
if (taoZhongflag) {
} else {
}
}).exec();
clearTimeout(this.timer)
}, 800)
},
},
};
</script>
<style lang="less" scoped>
@import '@/static/less/public.less';
.taoquan {
background: #f8bb47;
padding-top: 300rpx;
min-height: 100vh;
.btn-satus {
padding-top: 93rpx;
box-sizing: border-box;
.setbg(100%, 590rpx, 'quoitgame/taoquanbg.png');
.quanquan-box {
position: relative;
height: 408rpx;
.quanquan-people {
position: absolute;
bottom: 39rpx;
left: 50%;
margin-left: -133rpx;
.setbg(267rpx, 239rpx, 'quoitgame/people.png');
}
.quanquan {
width: 170rpx;
height: 170rpx;
.setbg(170rpx, 170rpx, 'quoitgame/quanquan.png');
margin: 0 auto;
position: relative;
&.go-move {
position: absolute;
animation: grab 0.8s ease forwards;
}
}
}
.btn {
.setbg(595rpx, 186rpx, 'quoitgame/btn-bg.png');
margin: 0 auto;
position: relative;
margin-top: -40px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
&::after {
content: '';
width: 120rpx;
height: 106rpx;
position: absolute;
right: 0rpx;
bottom: 40rpx;
.setbg(120rpx, 106rpx, 'quoitgame/finger-tip.png');
}
.top {
font-size: 44rpx;
font-weight: 600;
color: #fff;
margin-top: 10rpx;
&.to-sign-up {
margin-top: 30rpx;
}
}
.bot {
font-size: 24rpx;
color: #fcf19e;
margin-top: 4rpx;
}
&.taoquan-btn {
&.tao-hover {
.top,
.bot {
display: none;
}
&::after {
display: none;
}
.setbg(595rpx, 186rpx, 'quoitgame/taoquaning.png');
}
&:active {
.top,
.bot {
display: none;
}
&::after {
display: none;
}
.setbg(595rpx, 186rpx, 'quoitgame/btn-bg.png');
}
}
}
}
.scroll-box {
width: 100%;
margin-top: 200rpx;
.setbg(100%, 133rpx, 'quoitgame/guidao.png');
height: 148rpx;
background-size: 100% 133rpx;
background-position-y: bottom;
.scroll-wrapper {
list-style: none;
height: 80rpx;
width: max-content;
.scroll-item {
float: left;
height: 80rpx;
width: 160rpx;
position: relative;
padding: 0 50rpx;
.model {
position: absolute;
top: 0;
left: 0;
color: red;
}
image {
display: inline-block;
height: 80rpx;
width: 160rpx;
}
}
&.to-move {
animation: move 6s linear infinite;
}
}
}
}
@keyframes move {
100% {
transform: translate(var(--offset));
}
}
@keyframes grab {
0% {
top: 0rpx;
left: calc(50vw - 85rpx);
}
100% {
left: calc(50vw - 85rpx);
top: -300rpx;
}
}
</style>