广州网站建设定制设计,开网店无货源,官网搭建流程,周村网站制作首选公司解读方法 使用img :srccurrentFrame alt加载中 / 加载图片动态更改src的值使用 requestAnimationFrame 定时更新在需要的页面调用封装的组件 LoadToast v-ifshowLoading / 封装组件
templatediv class…
解读方法 使用img :srccurrentFrame alt加载中 / 加载图片动态更改src的值使用 requestAnimationFrame 定时更新在需要的页面调用封装的组件 LoadToast v-ifshowLoading / 封装组件
templatediv classmaskdiv classmask-content-boxdiv classmask-content-showdiv refmyLoad classmask-imgimg :srccurrentFrame alt加载中 //divdiv classmask-word账号绑定中请稍等…/div/div/div/div
/templatescript
export default {mounted() {this.handleLoad(43)},destroyed() {if (this.animation ! null) {cancelAnimationFrame(this.animation)}},data() {return {animation: null,currentFrame: ,}},methods: {handleLoad(max, fps 24) {let rootUrl ./icon_common_loading/icon_common_loading_000let currentUrl rootUrl this.getNumber(0)this.currentFrame require(${currentUrl})let index 0const frameInterval 1000 / fpslet lastTimestamp 0const render (timestamp) {if (!lastTimestamp) lastTimestamp timestampconst elapsed timestamp - lastTimestampif (elapsed frameInterval) {index max ? (index 0) : indexlet currentUrl rootUrl this.getNumber(index)this.currentFrame require(${currentUrl})indexlastTimestamp timestamp}this.animation requestAnimationFrame(render)}this.animation requestAnimationFrame(render)},getNumber(num) {if (num 10) {return 0 num .png} else {return num .png}},},
}
/scriptstyle langless scoped
.mask {background: transparent;position: absolute;top: 0;left: 0;width: 100%;height: 100%;-content-box {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}-content-show {width: 160px;height: 116px;background: rgba(0, 0, 0, 0.7);border-radius: 8px;display: flex;flex-direction: column;justify-content: center;align-items: center;}-img {width: 50px;height: 50px;img {width: 100%;height: 100%;}margin-bottom: 8px;}-word {color: #fff;font-size: 13px;line-height: 18px;}
}
/style
