首先看一张图片,就是要做成的效果。
当我们点击查询时,就会有一个请选择地点的弹出框。
这个状态我们只能去看微信开发文档了。
这个在API-界面-交互反馈-wx.hideLoading()
这个在主页面可以测试,然后给查询按钮添加事件。
什么是事件?
- 事件是视图层到逻辑层的通讯方式
- 事件可以将用户的行为反馈到逻辑层进行处理。
- 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
事件可以携带额外信息,如 id,dataset,touches
事件的使用方式
在组件中绑定一个事件处理函数
如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。
结构代码:
text class="find_text" bindtap="findEvent"查询/textjs代码中我们用到的是微信小程序中的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) },效果图如下:













