微信小程序loading组件显示载入动画用法示例【附源码下载】

本文实例讲述了微信小程序loading组件显示载入动画用法。分享给大家供大家参考，具体如下：

1、效果展示

2、关键代码

① index.wxml

<loading hidden="{{loadingHidden}}">
 加载中...
</loading>
<button type="default" bindtap="loadingTap">点击弹出loading</button>

② index.js

Page({
  data: {
    loadingHidden: true
  },
  loadingTap: function(){
    this.setData({
     loadingHidden: false
    });
    var that = this;
    setTimeout(function(){
     that.setData({
       loadingHidden: true
     });
     that.update();
    }, 3000);
  }
})

3、源代码点击此处本站下载。

希望本文所述对大家微信小程序开发有所帮助。

赞 (0)

相关推荐

  • 微信小程序自定义导航隐藏和显示功能

    微信小程序自定义导航隐藏和显示功能

    微信小程序中不能直接操作window对象,document文档,跟html的树结构不相同. 实现类似导航的隐藏显示,如图效果: 点击网络显示或隐藏网络中包含的内容.其他类似. 如果是jquery很方便实现,能直接操作document.在微信小程序中实现思路是:在逻辑层定义变量,通过setData赋值. 方法一:通过变量直接赋值,给每一个要控制显示的view定义变量 .wxml 代码: <!--index.wxml--> <view class="navView" bi

  • 微信小程序使用image组件显示图片的方法【附源码下载】

    微信小程序使用image组件显示图片的方法【附源码下载】

    本文实例讲述了微信小程序使用image组件显示图片的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 复制代码 代码如下: <image style="width: 300px; height: 300px; margin:10px;" mode="scaleToFill" src="{{imageSrc}}"></image> ② index.js Page({ data:{

  • 微信小程序动态的显示或隐藏控件的方法(两种方法)

    微信小程序动态的显示或隐藏控件的方法(两种方法)

    在微信小程序开发时,经常要用到一个控件会根据不同的情况和环境动态显示与隐藏这种情况,下面就来实践一把!上效果先 它的实现方法有两种, 第一种方法:单选法,就是隐藏与显示根据条件二选一,代码如下: <view class="{{showView?'bright789_view_show':'bright789_view_hide'}}"> <text class="bright789-text">我是被显示被隐藏控件</text>

  • 微信小程序 实现动态显示和隐藏某个控件

    微信小程序 实现动态显示和隐藏某个控件 在小程序的开发过程中,经常需要用到隐藏某个控件这种情况. 因为项目原本是需要将两个canvas切换,但是小程序的canvas支持的功能实在是少,本来就jQuery mobile或者将canvas转为图片就可以很容易实现滑动效果,但是都不支持,最后只能是做一个canvas,需要时显示,不需要时隐藏. 实现方法: logs.wxml <view> <button bindtap="onChangeShowState">{{sh

  • 微信小程序 新建登录页并实现tabBar隐藏

    微信小程序 新建登录页并实现tabBar隐藏

    微信小程序 新建登录页并实现tabBar隐藏 实现的效果如下两张图: app.json 设置的pages的path如下: 在app.json里面设置tabBar的值: 如果你不想在登录页有tabBar的内容,则在app.json 里面tabBar-->list-->pagePath 不能写登录页面的路径,并且首页跳转到登录页时,用 navigateTo 跳转到新页面即可实现tabBar的隐藏,如下图所示: login页面如何设置整个页面都是蓝色(#2da1ed)? 在login.json里面设

  • 微信小程序实践之动态控制组件的显示/隐藏功能

    组件有个属性:hidden='' ,值为true/false ,当false的时候说明不隐藏,当true的时候说明隐藏,注意该隐藏是不保留组件位置的. 实现即 .js 配合.wxml 文件 一.在.js 文件下的 Page({}) 里面 的data:{} 里面 创建一个布尔类型的属性 二.在.wxml文件下构建一个view组件 验证: 1.false,不隐藏的时候 2.true,隐藏的时候 总结 以上所述是小编给大家介绍的微信小程序实践之动态控制组件的显示/隐藏功能,希望对大家有所帮助,如果大家

  • 详解微信小程序 通过控制CSS实现view隐藏与显示

    详解微信小程序 通过控制CSS实现view隐藏与显示

    详解微信小程序 通过控制CSS实现view隐藏与显示 实现效果图: 视图代码,使用变量控制隐藏类名 <scroll-view scroll-y="true" > <view class="user_freeback"> <view class="txt"> <text> 为了更好地帮助您解决问题,请准确填写您的邮箱地址和电话号码,以便管理员给你答复.</text> </view&g

  • 微信小程序使用progress组件实现显示进度功能【附源码下载】

    微信小程序使用progress组件实现显示进度功能【附源码下载】

    本文实例讲述了微信小程序使用progress组件实现显示进度功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml 复制代码 代码如下: <progress percent="100" color="blue" stroke-width="20" show-info active/> progress组件属性说明如下: 感兴趣的朋友可以逐一尝试上述属性设置的具体用法. 3.源代码点击此处本站下载. 关

  • 微信小程序loading组件显示载入动画用法示例【附源码下载】

    本文实例讲述了微信小程序loading组件显示载入动画用法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml <loading hidden="{{loadingHidden}}"> 加载中... </loading> <button type="default" bindtap="loadingTap">点击弹出loading</button> ② index

  • 微信小程序使用radio显示单选项功能【附源码下载】

    本文实例讲述了微信小程序使用radio显示单选项功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml <radio-group bindchange="radiogroupBindchange"> <radio value="radio1">radio1</radio> <radio value="radio2">radio2</radio> &l

  • 微信小程序获取手机网络状态的方法【附源码下载】

    微信小程序获取手机网络状态的方法【附源码下载】

    本文实例讲述了微信小程序获取手机网络状态的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml布局文件代码 <view>手机网络状态:{{netWorkType}}</view> index.js逻辑文件代码 Page({ data: { netWorkType:'' }, onLoad: function () { var that=this wx.getNetworkType({ success: function(res) { that.s

  • 微信小程序 表单Form实例详解（附源码）

    微信小程序 表单Form实例详解（附源码）

    微信小程序 表单Form实例 表单Form的应用很广泛,我们可以利用form设计登录注册,也可以设计一种答题问卷的形式,今天主要讲一下form的使用 form表单,将组件内输入的"switch","input","checkbox","slider","radio","picker"的值进行提交,数据的格式为:name:value,所以表单中控件都需要添加name属性,否则找不到对应控件

  • 微信小程序公用参数与公用方法用法示例

    本文实例讲述了微信小程序公用参数与公用方法用法.分享给大家供大家参考,具体如下: 公用参数: 小程序的公共参数,例如网络请求地址.可配置项,可以写在app.js文件的globalData参数里. globalData: { userInfo: null, url: "", secret_key: "", url_param: { v: "1.1", format: "json", sign_method: "md5&

  • 微信小程序scroll-view组件实现滚动动画

    本文实例为大家分享了scroll-view组件实现索引列表滚动动画效果,供大家参考,具体内容如下 效果图 实现原理 利用scroll-view的scroll-into-view属性进行定位: 利用scroll-view的scroll-with-animation属性实现滚动动画过度. WXML <view class="right-nav"> <view bindtap="getCurrentCode" class="{{chooseIn

  • 微信小程序使用input组件实现密码框功能【附源码下载】

    微信小程序使用input组件实现密码框功能【附源码下载】

    本文实例讲述了微信小程序使用input组件实现密码框功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml <view style="width:80%; display:flex;"> <view>用户名:</view> <input style="border: 1px solid;border-color: lightblue;width:60%;" placeholder="

  • Hook实现Android 微信、陌陌 、探探位置模拟（附源码下载）

    Hook实现Android 微信、陌陌 、探探位置模拟（附源码下载）

    Hook实现Android 微信.陌陌 .探探位置模拟 最近需要对微信,陌陌等程序进行位置模拟 实现世界各地发朋友圈,搜索附近人的功能,本着站在巨人肩膀上的原则 爱网上搜索一番. 也找到一些 代码和文章,但是代码大都雷同而且都有一个弊端 比如说 微信 对目标函数实现hook之后第一次打开微信 第一次定位是可以改变的 但是 我如果想更换地址的话 就需要重启手机了,重新加载hook了,试了很多次都是这样满足不了需求. 为了改进这个地方我们从gps定义的源代码流程开始看寻找hook系统函数的突破口 我

  • 微信小程序 loading 组件实例详解

    微信小程序 loading 组件实例详解

    loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否 主要属性: wxml <!----> <button type="primary" bindtap="listenerButton">显示loading</button> <!--默认隐藏--> <loading hidden="{{hiddenLoading}}">正在加载</loading>

随机推荐