微信小程序開發--API界面交互

一、wx:showActionSheet（上拉菜單）

屬性	類型	默認值	必填	說明
itemList	Array.<string>		是	按鈕的文字數組，數組長度最大為 6
itemColor	string	#000000	否	按鈕的文字顏色
success	function		否	接口調用成功的回調函數
fail	function		否	接口調用失敗的回調函數
complete	function		否	接口調用結束的回調函數（調用成功、失敗都會執行）

tapIndex

number

用戶點擊的按鈕序號，從上到下的順序，從0開始

 

二、wx:showModal（彈窗）

屬性	類型	默認值	必填	說明
title	string	否	提示的標題
content	string	否	提示的內容
showCancel	boolean	true	否	是否顯示取消按鈕
cancelText	string	'取消'	否	取消按鈕的文字，最多 4 個字符
cancelColor	string	#000000	否	取消按鈕的文字顏色，必須是 16 進制格式的顏色字符串
confirmText	string	'確定'	否	確認按鈕的文字，最多 4 個字符
confirmColor	string	#576B95	否	確認按鈕的文字顏色，必須是 16 進制格式的顏色字符串
success	function	否	接口調用成功的回調函數
fail	function	否	接口調用失敗的回調函數
complete	function	否	接口調用結束的回調函數（調用成功、失敗都會執行）

三、showToast / hideToast（加載）

屬性	類型	默認值	必填	說明	最低版本
title	string	是	提示的內容
icon	string	'success'	否	圖標
image	string	否	自定義圖標的本地路徑，image 的優先級高於 icon	1.1.0
duration	number	1500	否	提示的延遲時間
mask	boolean	false	否	是否顯示透明蒙層，防止觸摸穿透
success	function	否	接口調用成功的回調函數
fail	function	否	接口調用失敗的回調函數
complete	function	否	接口調用結束的回調函數（調用成功、失敗都會執行）

 

Object object

屬性	類型	默認值	必填	說明
success	function		否	接口調用成功的回調函數
fail	function		否	接口調用失敗的回調函數
complete	function		否	接口調用結束的回調函數（調用成功、失敗都會執行）

 

object.icon 的合法值

值	說明	最低版本
success	顯示成功圖標，此時 title 文本最多顯示 7 個漢字長度
loading	顯示加載圖標，此時 title 文本最多顯示 7 個漢字長度
none	不顯示圖標，此時 title 文本最多可顯示兩行，1.9.0及以上版本支持

四、showLoading /hideLoading（加載）

屬性	類型	默認值	必填	說明
title	string	是	提示的內容
mask	boolean	false	否	是否顯示透明蒙層，防止觸摸穿透
success	function	否	接口調用成功的回調函數
fail	function	否	接口調用失敗的回調函數
complete	function	否	接口調用結束的回調函數（調用成功、失敗都會執行）

注意

• wx.showLoading 和 wx.showToast 同時只能顯示一個
• wx.showLoading 應與 wx.hideLoading 配對使用

 

<view class="container">
  <button bindtap="onload">showActionSheet</button>

  <button bindtap="onModal">showModal</button>

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

  <button bindtap="onHideToast">hideToast</button>

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

//index.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {

  },
  onload: function() {
    console.log("點擊了我")
    //交互操作組件  必須通過API的方式使用
    wx.showActionSheet({
      itemList: ['刺激戰場', '王者榮耀', '爐石傳說'],
      //點擊其中任一項回調
      success: function(res) {
        //res.cancel是否點擊了取消、
        if (!res.cancel) {
          //tapIndex指的是點擊的下標
          console.log(res.tapIndex)
        }
      }
    })
  },
  onModal: function() {
    wx: wx.showModal({
      title: '標題',
      //提示的標題
      content: '內容',
      //提示的內容
      showCancel: true,
      //是否顯示取消
      cancelText: 'res',
      //按鈕的內容，最多四個字符
      cancelColor: '#ff0',
      //取消按鈕的文字顏色，必須是 16 進制格式的顏色字符串
      confirmText: '確定',
      //確認按鈕的文字，最多 4 個字符
      confirmColor: '#666',
      //確認按鈕的文字顏色，必須是 16 進制格式的顏色字符串
      success: function(res) {
        console.log('調用成功')
      },
      //接口調用成功的回調函數
      fail: function(res) {
        console.log('調用失敗')
      },
      //接口調用失敗的回調函數
      complete: function(res) {
        console.log('e')
      },
      //接口調用結束的回調函數（調用成功、失敗都會執行）
    })
  },
  onToast: function() {
    wx: wx.showToast({
      title: '成功',
      icon: 'success',
      image: '',
      duration: 2000,
      mask: true,
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
  },
  onLoading: function() {
    wx: wx.showLoading({
      title: '加載中',
      mask: true,
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    }),
    setTimeout(
      function() {
        wx.hideLoading()
      }, 2000
    )
  },
  onHideToast: function() {
    wx.hideToast({
        success: function(res) {
          console.log('調用成功')
        }
      })
  }
})