小程序-界面：1交互

交互

wx.showToast 消息提示框

wx.showModal 显示模态对话框

wx.showLoading 显示loading提示框，必须用wx.hideLoading关闭

wx.showActionSheet 显示操作菜单话框

wx.hideToast 关闭消息提示框

wx.hideLoading 显示loading提示框

wx.enableAlertBeforeUnload

wx.disableAlertBeforeUnload

<view class="padd">
<view class="btn-area" id="buttonContainer">
<button bindtap="ShowToast"  type="primary">显示消息提示框</button> 
<button bindtap="HideToast"type="default"  >关闭小时提示框</button>
<button bindtap="ShowLoading" type="primary" >显示 loading 提示框。</button>
<button bindtap="HideLoading" type="primary" loading="true" >loading 提示框</button>
<button bindtap="ShowModal" type="primary">显示模态对话框</button>
<button bindtap="ShowActionSheet" type="primary">显示操作菜单</button>
<button bindtap="EnableAlertBeforeUnload" type="primary">开启小程序页面返回询问对话框</button>
<button bindtap="DisableAlertBeforeUnload" type="default">关闭小程序页面返回询问对话框</button>
</view>
</view>

/**
   * 消息提示框
   *  */
  ShowToast: function () {
    wx.showToast({
      title: '成功',
      duration: 12000,
      icon: 'success',
    })
  },
  HideToast: function () {
    wx.hideToast();
  },
  /**
   * loading 提示框
   * @param {} options 
   */
  ShowLoading: function () {
    wx.showLoading({
      title: '显示loading提示框',
    })
  },
  HideLoading: function () {
    wx.hideLoading()
  },
  /**
   * 模态对话框
   * @param {} options 
   */
  ShowModal: function () {
    wx.showModal({
      title: '提示',
      content: '这是一个模态弹窗',
      success(res) {
        if (res.confirm) {
          console.log('用户点击确定')
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  },
  /**
   * 操作菜单 下边弹窗效果
   * @param {} options 
   */
  ShowActionSheet: function () {
    wx.showActionSheet({
      itemList: ['A', 'B', 'C'],
      success(res) {
        console.log(res.tapIndex)
      },
      fail(res) {
        console.log(res.errMsg)
      }
    })
  },

小程序-界面：1交互

猜你喜欢