【广州前端】微信小程序入门之路(四)之组件二 - 黑马程序员技术交流社区

在上一篇文章中已为大家详细介绍了一些组件的是使用，http://bbs.itheima.com/forum.php?mod=viewthread&tid=420864&extra=

1. modal：（对话框）

点击按钮显示对话框，点击确认按钮或取消按钮隐藏对话框。

[HTML] 纯文本查看 复制代码

<button bindtap='modalShow'>modalShow</button>



<modal title='我是标题' confirm-text='确认' cancle-text='取消' hidden="{{modalHidden}}" bindconfirm="modalConfirm" bindcancel="modalCancel">我是内容</modal>

[JavaScript] 纯文本查看 复制代码

Page({



  /**



 * 页面的初始数据



   */



  data: {



    modalHidden: true,



 



  },



  modalShow: function () {



    this.setData({ modalHidden: false })



  },



  modalConfirm: function () {



    this.setData({ modalHidden: true })



  },



  modalCancel: function () {



    this.setData({ modalHidden: true })



  }



})

下面介绍一下这个组件的属性

confirm-text 确认按钮上的字

cancle-text 取消按钮上的字

bindconfirm 点击确认时触发的事件

bindcancel 点击取消时触发的事件

点击按钮显示吐司，本例中吐司的持续时间为2秒，2秒后会触发bindchange函数，手动隐藏toast（其中的duration为吐司的持续时间）

[HTML] 纯文本查看 复制代码

<button bindtap='toastShow'>toastShow</button>



<toast hidden="{{toastHidden}}" bindchange="toastChange" duration="2000">我是吐司</toast>

[JavaScript] 纯文本查看 复制代码

Page({



  /**



   * 页面的初始数据



   */



  data: {



    toastHidden: true,



 



  },



  //点击按钮



  toastShow: function () {



    this.setData({ toastHidden: false })



  },



  //吐司的持续时间到了自动触发



  toastChange: function () {



    this.setData({ toastHidden: true })



  }

3. loading（加载框）组件

点击按钮显示加载框，模拟数据请求，两秒后隐藏加载框（不同于toast，没有duration属性）

[HTML] 纯文本查看 复制代码

<button bindtap='loadingShow'>loadingShow</button>



<loading hidden="{{loadingHidden}}">加载中...</loading>

[JavaScript] 纯文本查看 复制代码

Page({



  /**



   * 页面的初始数据



   */



  data: {



    loadingHidden: true,



  },



  loadingShow: function () {



    this.setData({ loadingHidden: false })



    var that = this



    setTimeout(function () {



      that.setData({



        loadingHidden: true



      })



    }, 2000)



  }



})

注意：其实目前的微信公众平台组件列表已经没有上述的四个组件了，我们可以调用微信的api来使用以上四个操作反馈组件。

[HTML] 纯文本查看 复制代码

<button bindtap="showToast">showToast</button>



<button bindtap="showLoading">showLoading</button>



<button bindtap='showModal'>showModal</button>



<button bindtap='showActionSheet'>showActionSheet</button>

[JavaScript] 纯文本查看 复制代码

Page({

  /**

* 页面的初始数据

*/

  data: {

  },

  //展示吐司

  showToast: function () {

wx.showToast({

   title: '我是吐司',

   duration: 2000,

   icon: "loading"

})

  },

  //展示等待框，请求数据完成后需要手动调用wx.hideLoading()隐藏

  showLoading: function () {

wx.showLoading({

   title: '我是loading',

})

setTimeout(function () {

   wx.hideLoading()

}, 2000);

  },

  //展示对话框

  showModal: function () {

wx.showModal({

   title: '提示',

   content: '这是一个对话框',

   success: function (res) {

      if (res.confirm) {

      console.log('用户点击确定')

      } else if (res.cancel) {

      console.log('用户点击取消')

      }

   }

})

  },

  //显示操作菜单

  showActionSheet: function () {

wx.showActionSheet({

   itemList: ['A', 'B', 'C'],

   //用户点击的按钮，从上到下的顺序，从0开始

   success: function (res) {

      console.log("success" + res.tapIndex)

   },

   //点击取消会走fail

   fail: function (res) {

      console.log("fail" + res.errMsg)

   }

})

  }

})