代码基于vue 2语法编写，拷贝出来需保存为.vue文件。该示例代码中，包括三大模块：<script>,<template>,<style>，三大模块的作用分别是：控制元素逻辑和数据绑定,编写组织页面元素的渲染,控制和渲染元素的样式。
<template>
<view class="center">
<view class="container">
<image class="dot" src="randomImg" style="width: 92px;height: 92px;border-radius: 50px;"></image>
<view class="pulse"></view>
<view class="pulse1"></view>
<view class="prize-flying" >
<view v-for="(item,index) in flyLeftList" class="fly-prize fly-left"
:style="{ 'background': 'url('+ item.img +')', '-webkit-animation-duration': flySpeed + 's','animation-duration': flySpeed + 's' }"></view>
<view v-for="(item,index) in flyCenterList" class="fly-prize fly-center"
:style="{ 'background': 'url('+ item.img +')', '-webkit-animation-duration': flySpeed + 's','animation-duration': flySpeed + 's' }"></view>
<view v-for="(item,index) in flyRightList" class="fly-prize fly-right"
:style="{ 'background': 'url('+ item.img +')', '-webkit-animation-duration': flySpeed + 's','animation-duration': flySpeed + 's' }"></view>
</view>
</view>
<view class="flex justify-center items-center match-button" @click="showMan">
<view class="match-btn">
心动匹配
</view>
</view>
</view>
</template>
<script>
import utils from '@/utils/utils'
export default {
components: {utils},
data() {
return {
show:false,
randomImg:'/static/imgs/mm1.jpg',
flyLeftList: [],
flyCenterList: [],
flyRightList: [],
userList:[{img:'/static/imgs/mm1.jpg'},{img:'/static/imgs/mm2.jpg'},{img:'/static/imgs/mm3.jpg'}],
flySpeed: 25,
indexRecord: 0,
intervalTime: 2.5,
interval: null,
};
},
// 从后台进入前台显示
onShow() {
this.flyLeftList=[];
this.flyCenterList=[];
this.flyRightList=[];
this.refreshUser();
