小程序学习之简单的模拟弹窗

效果如下：

代码如下（在index.js中）：

wx.showModal({
      title: '提示',
      content: '这是一个模拟弹窗',
      success: function (res) {
        if (res.confirm) {
          console.log('用户点击确认')
        }
      }
    })

　

改变代码的位置，变成点击头像才会出现弹窗的形式，代码如下：

bindViewTap: function() {
    wx.showModal({
      title: '提示',
      content: '这是一个模拟弹窗',
      success: function (res) {
        if (res.confirm) {
          wx.navigateTo({    //表示点击确认后会跳转到logs页面
            url:'../logs/logs'
          })
        }
      }
    })
  }

　　

增加新的属性，效果如下：

让弹窗只显示“是”这个按钮，效果如下：

代码如下：

bindViewTap: function() {
    wx.showModal({
      title: '测试',
      confirmText:"是",
      showCancel:false,//不展示“否”这个按钮
      cancelText:"否",
      cancelColor:"#ff0000",//把“否”的文字变成红色
      content: '这是个测试文字',
      success: function (res) {
        if (res.confirm) {
          wx.navigateTo({
            url:'../logs/logs'
          })
        }
      }
    })
  }

　　

Toast组件：

 

代码如下：

wx.showToast({
     title:"成功",  //提示的内容
     icon:"success",   //图标，只支持“success”和“loading”
     duration:10000  //提示的延迟时间
   })

 

修改属性的效果图：

代码如下：

 wx.showToast({
     title:"加载完成",  //提示的内容
     icon:"loading",   //图标，只支持“success”和“loading”
     duration:10000 //提示的延迟时间
   })
   //在2000毫秒时调用hideToast函数方法将Toast窗口隐藏掉
   setTimeout(function(){
     wx.hideToast()
   },2000)