美文网首页
小程序API之界面交互

小程序API之界面交互

作者: 蝴蝶结199007 | 来源:发表于2021-01-27 14:43 被阅读0次

    (1)wx.showToast 消息提示框

    这里要注意一下代码的注释,icon目前只支持 "success" 和 "loading",如果想要去除图标的话,设置 icon:'none';
    另外微信小程序官方还给出了一个属性 mask ,默认为 false,没有实际显示效果,透明蒙层,防止触摸穿透

    wx.showToast({
      title: '成功',
      icon: 'success' ,//只支持"success"、"loading" ,默认success,去除图标用 none
      image:'', //自定义图标的本地路径,优先级高于 icon
      duration: 1000,
      success: function() {}
    })
    

    (2)wx.showModal消息模态框

    wx.showModal({
      title: '标题',
      content: '选择确定或者取消?',
      success (res) {
        if (res.confirm) {
          console.log('点击了确定')
        } else if (res.cancel) {
          console.log('点击了取消')
        }
      }
    })
    

    success 回调函数:

    success 回调函数

    注意:
    1、Android 6.7.2 以下版本,点击取消或蒙层时,回调 fail, errMsg 为 "fail cancel";
    2、Android 6.7.2 及以上版本 和 iOS 点击蒙层不会关闭模态弹窗,所以尽量避免使用「取消」分支中实现业务逻辑

    (3)wx.showLoading - wx.hideLoading

    loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框;
    同样也包含属性 mask;
    wx.showLoading 和 wx.showToast 同时只能显示一个;

      wx.showLoading({
        title: '加载中'
      })
      setTimeout(function () {
        wx.hideLoading()
      }, 2000)
    

    (4)wx.showActionSheet 操作菜单

    wx.showActionSheet({
      itemList: ['选项一', '选项二', '选项三'],
      success (res) {
        console.log(res.tapIndex)
      },
      fail (res) {
        console.log(res.errMsg)
      }
    })
    
    • itemList 为数组,最大长度为6;
    • tapIndex 为用户点击的序号,顺序从上到下,从0开始;
    • 与 wx.showModal 模态框一样,需要注意回调fail,详情查看 第二点 内引用的微信官方的部分;

    (5)wx.hideToast 隐藏消息提示框

    参数仅包含 success、fail、complete;
    目前这段测试代码是放在wx.showToast后面进行测试的,可以正常执行。

       setTimeout(function(){
          wx.hideToast({
            success () {
              console.log("hideToast")
            },
            fail () {
              console.log("hideToast.fail")
            }
          })
        },2000)
    
    总结

    相关文章

      网友评论

          本文标题:小程序API之界面交互

          本文链接:https://www.haomeiwen.com/subject/ngxezktx.html