小程序怎么做loading

时间:2025-01-29 23:01:48 单机游戏

在微信小程序中实现loading效果,可以通过以下几种方法:

方法一:使用微信小程序自带的loading组件

微信小程序提供了`wx.showLoading`和`wx.hideLoading` API,可以快速实现一个简单的loading效果。

在wxml文件中

```html

```

在js文件中

```javascript

Page({

data: {

loadingHidden: true

},

loadingTap: function() {

this.setData({

loadingHidden: false

});

var that = this;

setTimeout(function() {

that.setData({

loadingHidden: true

});

that.update();

}, 3000);

}

});

```

方法二:自定义loading组件

如果你需要更复杂的loading效果,可以自定义一个组件。

创建一个新的页面组件 ,例如`loading.wxml`:

```html

{{loadingContent}}

```

在对应的js文件中

```javascript

Page({

properties: {

proContent: {

type: String,

value: "正在加载..."

}

},

data: {

loadingHidden: true

},

loadingTap: function() {

this.setData({

loadingHidden: false

});

var that = this;

setTimeout(function() {

that.setData({

loadingHidden: true

});

that.update();

}, 3000);

}

});

```

在样式文件中

```css

.loading-container {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

.loading-text {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

```

方法三:使用Canvas绘制loading动画

如果你需要更高级的loading动画效果,可以使用Canvas来绘制。

在wxml文件中

```html

```

在js文件中