[小程序图文教程] 教你:微信小程序中如何使用loading组件显示载入动画

2017-3-10 16:55
37159
本帖最后由 TheBeauty2017 于 2017-3-29 15:36 编辑

教你小程序系列教程:
1.教你:微信小程序如何实现scroll-view隐藏滚动条
2.教你:如何使用scroll-view组件实现视图垂直滚动(附源码)
3.教你:小程序如何使用swiper组件实现图片切换(附源码)
4.教你:微信小程序中如何设置拨打电话(附源码)
5.教你:如何打开小程序如何打开微信自带的地图(附源码)

6. 教你:如何使用小程序画布组件绘制自动缩放正方形(附源码)
7. 教你:如何使用微信小程序video组件播放视频(附源码)

8. 教你:如何使用小程序画布组件绘制一个会自动旋转正方形
9. 教你:微信小程序中如何使用loading组件显示载入动画

我们在学习微信小程序时,应该会遇到载入图片或者动画需要等待的情况,那么这个等待的画面我们应该怎么编写呢?今天我们就写一个这样的小教程。
先来看效果图:
载入.gif

重要代码
1.首页代码:
[AppleScript] 纯文本查看 复制代码
<view class="copyright">
    <view class="copyright_item">CopyRight:All Right Reserved</view>
    <view class="copyright_item">原创作者:HTML51.COM</view>
    <view class="copyright_item">微信小程序开发者社区:51小程序</view>
    <view class="copyright_item"><image class="img" src="../copyright/image/logo.png"/></view>
    <view class="goto_counter"><button type="default" bindtap="goto_counter">点击进入弹出loading加载框页面</button></view>
</view>


2..js代码
[AppleScript] 纯文本查看 复制代码
Page({
    data: {
        loadingHidden: true
    },
    loadingTap: function(){
        this.setData({
          loadingHidden: false
        });
        var that = this;
        setTimeout(function(){
          that.setData({
              loadingHidden: true
          });
          that.update();
        }, 3000);
    }
})


loading页面代码
[AppleScript] 纯文本查看 复制代码
<loading hidden="{{loadingHidden}}">
        加载中...
</loading>
<button type="default" bindtap="loadingTap">点击弹出loading</button>


源码如下:
游客,如果您要查看本帖隐藏内容请回复

分享到 :
0 人收藏

9 个回复

倒序浏览
TheBeauty2017  管理员 | 2017-3-14 14:54:22
多谢分享
郁郁竹  小程序菜鸟 | 2017-12-12 10:44:12
谢谢,这个好
不精独乐  小程序菜鸟 | 2018-1-18 11:31:11
11111111111111111111111111
qwq6866386  小程序菜鸟 | 2018-7-2 09:53:49
lazyloading
qwq6866386  小程序菜鸟 | 2018-7-2 09:55:03
lazyloading
as438200080  小程序菜鸟 | 2018-8-14 15:48:40
qiukanyuanmaxuexi
h34543686  小程序菜鸟 | 2018-8-21 14:28:36
感谢分享
liuxiangshi  小程序菜鸟 | 2018-8-31 11:11:13
多谢分享
韩世雄  小程序菜鸟 | 4 天前
666666666666感谢
您需要登录后才可以回帖 登录 | 朕要注册

本版积分规则

QQ|手机版|51小程序,合作QQ: 2826431922 ( 苏ICP备15027371号 )

Powered by Discuz! X3.2

返回顶部