代码基于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();