小程序的彈窗效果

以下各項OBJECT參數說明詳見官方文檔-彈窗

1、wx.showToast(OBJECT)

顯示消息提示框
示例代碼：

wx.showToast({
  //提示內容
  title: '成功',
  //提示圖標樣式：success/loading
  icon: 'success',
  //提示顯示時間
  duration: 2000
})

success效果：

loading效果：

---

2、wx.hideToast()

隱藏消息提示框

wx.showToast({
    title: '沒有更多內容了了！',
    icon: 'loading',
    duration: 10000
})
//提示窗會在2秒後關閉
setTimeout(function(){
    wx.hideToast()
},2000)

---

3、wx.showModal(OBJECT)

​顯示模態彈窗

代碼：

wx.showModal({
    //提示標題
    title:'網絡提示',
    //提示內容
    content:'當前不在wifi網絡環境，確定要繼續嗎？',
    //是否顯示取消按鈕，默認true
    showCancel:true,
    //取消按鈕文字，默認'取消'
    cancleText:'取消',
    //取消按鈕文字顏色，默認'#000000'
    cancelColor:'#000000',
    //確認按鈕文字,默認'確認'
    confirmText:'繼續',
    //確認按鈕文字顏色，默認'#3CC51F'
    confirmColor:'#3CC51F',
    //調用成功回調函數
    success:function(res){
        console.log(res);
        //點擊確定按鈕res內容: Object{errMsg: "showModal:ok", confirm: 1}
        //點擊取消按鈕res內容: Object{errMsg: "showModal:ok", confirm: 0}

    },
    //調用失敗回調函數
    fail:function(){

    },
    //無論調用成功還是失敗會執行的回調函數
    complete:function(){

    }
})

效果：

---

4、wx.showActionSheet(OBJECT)

​顯示操作菜單

wx.showActionSheet({
    //按鈕文字數組，最多6個
   itemList: ['我是第一個按鈕', '咱是第二個按鈕', '我是第三個按鈕'],
    //按鈕文字顏色，默認'#000000'
    itemColor:'#000000',
    //調用成功時的回調函數
    success: function(res) {
        //cancel:是否點擊取消按鈕
        if (!res.cancel) {
            //tapIndex:點擊按鈕，從上到下的順序，從0開始
            console.log(res.tapIndex)
        }
    },
    //調用失敗時的回調函數
    fail:function(){

    },
    //無論調用成功或者失敗時的回調函數
    complete:function(){

    }
})

效果：