微信小程式-訊息提示框實例

做Android的時候對toast是很熟悉的.微信小程式開發中toast也是重要的訊息提示方式.

提示框：

wx.showToast(OBJECT)

顯示訊息提示框

顯示訊息提示框

JECT說明：

範例程式碼：

wx.showToast({
 title: '成功',
 icon: 'success',
 duration: 2000
})

   

wx.hideToast()

wx.hideToast()

wx.showModal(OBJECT)

顯示模態彈窗

OBJECT參數說明：

範例程式碼：

wx.showToast({
 title: '加载中',
 icon: 'loading',
 duration: 10000
})
 
setTimeout(function(){
 wx.hideToast()
},2000)

   

wOB.showActionActions(M

success回傳參數說明：

範例程式碼：

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

   

設定導覽條

wx.setNavigationBarTiTTitle(設定導覽條

wx.setNavigationBarTitle(羅)。

OBJECT參數說明：

範例程式碼：

wx.showActionSheet({
 itemList: ['A', 'B', 'C'],
 success: function(res) {
  if (!res.cancel) {
   console.log(res.tapIndex)
  }
 }
})

wx.showNavigationBarLoading()

在目前頁面顯示導覽條載入動畫。

wx.hideNavigationBarLoading()

隱藏導航條載入動畫。

頁面跳轉：

wx.navigateTo(OBJECT)

保留目前頁面，跳到應用程式內的某個頁面，使用wx.navigateBack可以回到原始頁面。

OBJECT參數說明：

範例程式碼：

wx.setNavigationBarTitle({
 title: '当前页面'
})

wx.navigateTo({
 url: 'test?id=1'
})

注意：為了不讓使用者在使用小程式時造成困擾，我們規定頁面路徑只能是五層，請盡量避免多層的路徑交互方式。

wx.redirectTo(OBJECT)

關閉目前頁面，跳到應用程式內的某個頁面。

OBJECT參數說明：

範例程式碼：

//test.js
Page({
 onLoad: function(option){
  console.log(option.query)
 }
})

wx.navigateBack(OBJECT)

關閉目前頁面，傳回上一頁面或多層頁面。可透過 getCurrentPages()) 取得目前的頁面棧，決定需要傳回幾層。

OBJECT參數說明：

 動畫：

wx.createAnimation(OBJECT)

建立一個動畫實例animation。呼叫實例的方法來描述動畫。最後透過動畫實例的export方法匯出動畫資料傳遞給元件的animation屬性。

注意: export 方法每次呼叫後會清除之前的動畫操作

OBJECT參數說明：

wx.redirectTo({
 url: 'test?id=1'
})

   

ani會返回自身，支援鍊式呼叫的寫入法。

樣式：

旋轉：

 縮放：

 矩陣變形：

 動畫隊列

呼叫動畫操作方法後要呼叫step() 來表示一組動畫完成，可以在一組動畫中呼叫任意多個動畫方法，一組動畫中的所有動畫會同時開始，一組動畫完成後才會進行下一組動畫。 step 可以傳入一個跟 wx.createAnimation() 一樣的設定參數用來指定目前群組動畫的配置。

範例：

var animation = wx.createAnimation({
 transformOrigin: "50% 50%",
 duration: 1000,
 timingFunction: "ease",
 delay: 0
})

<view animation="{{animationData}}" style="background:red;height:100rpx;width:100rpx"></view>

   

wx.hideKeyboard()

收起鍵盤。

wx.stopPullDownRefresh()

停止目前頁面下拉刷新。詳見 頁面相關事件處理函數。