微信小程序实现游戏进度条展示

2024-01-17   阅读:264   分类:后端    标签: 微信小程序

工作中遇到需要实现一个微信小程序类似游戏进度条的效果,以下是个案例,分享给大家。

一、成品效果展示:

二、HTML代码:wxml

<view class="fixeed_loading" wx:if="{{hideloading}}">
 <view class="loadingbox">
  <view class="loading">
   <view class="loading_h" style="width: {{progress}}%;"></view>
   <view class="numq" style="position: absolute; left: {{progress-10}}%;">
    <view class="numqnei">{{progress}}</view>
   </view>
  </view>
  <view class="logonanme">进度条展示</view>
 </view>
</view>

三、CSS代码:wxss

.fixeed_loading{width: 100%; height: 100vh;background-color: #2454a6;position: fixed; left: 0rpx; top: 0rpx; z-index: 999; display: flex; align-items: center; }
.logonanme{ width: 100%; font-size: 40rpx;}
.fixeed_loading view{ color: #fff;}
.loadingbox{ width: 500rpx; margin: 0 auto; text-align: center;}
.loading{ width: 100%; height: 22rpx; background-color: #d9dadc; border-radius: 45rpx; margin-bottom: 30rpx; position: relative;}
.loading_h{ width: 0%; height: 22rpx; background-color: #ffbd4e; border-radius: 45rpx; position: relative; overflow: hidden; }
.numq{ width: 80rpx; height: 80rpx; background: linear-gradient(45deg, #dc8438, #fac168); border-radius: 50%; font-size: 25rpx; position: absolute; top: -110rpx;}
.numqnei{ width: 60rpx; height: 60rpx; display: inline-block; border: 1px solid #fff; margin: 0 auto; margin-top: 10rpx; border-radius: 50%;line-height: 60rpx;}
.numqnei::after {content: "";display: block; position: absolute;top: 110%;left: 50%; margin-left: -10rpx; width: 0; height: 0;border-top: 15rpx solid #ea923a;border-left: 10rpx solid transparent; border-right: 15rpx solid transparent;
}
.loading_h::before { content: '';position: absolute; left: 0rpx;top: 0rpx;background:repeating-linear-gradient(45deg,#feb354 0,#feb354 16rpx,#ff8405 16rpx,#ff8405 32rpx);width: 100%; height: 100px; animation: move 2s linear infinite;}
@keyframes move{
 0%{
  transform: translate(0,0);
 }
 100%{
  transform: translate(0,-136rpx);
 }
}

四、JS逻辑代码:

Page({

 /**
  * 页面的初始数据
  */
 data: {
  progress:0,
  hideloading:true,
 },

 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  this.startLoading();
 },
  startLoading: function() {
   var that = this;
   var progress = 0;

   // 使用定时器模拟加载进度
   var timer = setInterval(function() {
    if (progress >= 100) {
     clearInterval(timer);
     that.setData({
      hideloading: false
     })
    } else {
     progress++;
     // 更新提示框标题为当前加载进度
     that.setData({
      progress: progress
     })
     // wx.showToast({
     //  title: '加载中 ' + progress + '%',
     //  icon: 'loading',
     //  duration: 10000,
     //  mask: true
     // });
    }
   }, 20);
  }
})
【腾讯云】年度爆款2核2G4M云服务器118元/年,新老用户同享

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://tpxhm.com/adetail/1032.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×