首頁  >  文章  >  php教程  >  微信小程式-訊息提示框實例

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

高洛峰
高洛峰原創
2016-12-05 13:46:402055瀏覽

做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()

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

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

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn