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

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

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

一、成品效果展示：

二、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);
  }
})