微信小程序> 微信小程序开发(三)显示loading提示框

微信小程序开发(三)显示loading提示框

浏览量:773 时间: 来源:天下1281

首先看一张图片,就是要做成的效果。
小程序
当我们点击查询时,就会有一个请选择地点的弹出框。
这个状态我们只能去看微信开发文档了。
这个在API-界面-交互反馈-wx.hideLoading()
这个在主页面可以测试,然后给查询按钮添加事件。
什么是事件?

  • 事件是视图层到逻辑层的通讯方式
  • 事件可以将用户的行为反馈到逻辑层进行处理。
  • 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
  • 事件可以携带额外信息,如 id,dataset,touches

    事件的使用方式
    在组件中绑定一个事件处理函数
    如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。
    结构代码:

text class="find_text" bindtap="findEvent"查询/text

js代码中我们用到的是微信小程序中的API-界面-交互反馈-wx.showLoading(object)
小程序

//index.js//获取应用实例var app = getApp()Page({  data: {    motto: 'Hello World',    userInfo: {}  },  findEvent: function(){    wx.showLoading({        title: '请选择地点',      })      setTimeout(function(){        wx.hideLoading()      },2000)  },  //事件处理函数  bindViewTap: function() {    wx.navigateTo({      url: '../logs/logs'    })  },  onLoad: function () {    console.log('onLoad')    var that = this    //调用应用实例的方法获取全局数据    app.getUserInfo(function(userInfo){      //更新数据      that.setData({        userInfo:userInfo      })    })  }})

重点在这部分:

findEvent: function(){    wx.showLoading({        title: '请选择地点',      })      setTimeout(function(){        wx.hideLoading()      },2000)  },

效果图如下:
小程序

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎