小程序中如何制作消息提示框

這篇文章主要介紹小程序中如何制作消息提示框，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

做Android的時候?qū)oast是很熟悉的.微信小程序開發(fā)中toast也是重要的消息提示方式.

提示框：

wx.showToast(OBJECT)

顯示消息提示框

OBJECT參數(shù)說明：

示例代碼：

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

wx.hideToast()

隱藏消息提示框

wx.showToast({
 title: '加載中',
 icon: 'loading',
 duration: 10000
})

setTimeout(function(){
 wx.hideToast()
},2000)

wx.showModal(OBJECT)

顯示模態(tài)彈窗

OBJECT參數(shù)說明：

示例代碼：

wx.showModal({
 title: '提示',
 content: '這是一個模態(tài)彈窗',
 success: function(res) {
  if (res.confirm) {
   console.log('用戶點擊確定')
  }
 }
})

wx.showActionSheet(OBJECT)

顯示操作菜單

OBJECT參數(shù)說明：

success返回參數(shù)說明：

示例代碼：

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

設(shè)置導(dǎo)航條

wx.setNavigationBarTitle(OBJECT)

動態(tài)設(shè)置當(dāng)前頁面的標(biāo)題。

OBJECT參數(shù)說明：

示例代碼：

wx.setNavigationBarTitle({
 title: '當(dāng)前頁面'
})

wx.showNavigationBarLoading()

在當(dāng)前頁面顯示導(dǎo)航條加載動畫。

wx.hideNavigationBarLoading()

隱藏導(dǎo)航條加載動畫。

頁面跳轉(zhuǎn)：

wx.navigateTo(OBJECT)

保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面，使用wx.navigateBack可以返回到原頁面。

OBJECT參數(shù)說明：

示例代碼：

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

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

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

wx.redirectTo(OBJECT)

關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。

OBJECT參數(shù)說明：

示例代碼：

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

wx.navigateBack(OBJECT)

關(guān)閉當(dāng)前頁面，返回上一頁面或多級頁面?？赏ㄟ^ getCurrentPages()) 獲取當(dāng)前的頁面棧，決定需要返回幾層。

OBJECT參數(shù)說明：

動畫：

wx.createAnimation(OBJECT)

創(chuàng)建一個動畫實例animation。調(diào)用實例的方法來描述動畫。最后通過動畫實例的export方法導(dǎo)出動畫數(shù)據(jù)傳遞給組件的animation屬性。

注意: export 方法每次調(diào)用后會清掉之前的動畫操作

OBJECT參數(shù)說明：

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

animation

動畫實例可以調(diào)用以下方法來描述動畫，調(diào)用結(jié)束后會返回自身，支持鏈?zhǔn)秸{(diào)用的寫法。

樣式：

旋轉(zhuǎn)：

縮放：

偏移：

傾斜：

矩陣變形：

動畫隊列

調(diào)用動畫操作方法后要調(diào)用 step() 來表示一組動畫完成，可以在一組動畫中調(diào)用任意多個動畫方法，一組動畫中的所有動畫會同時開始，一組動畫完成后才會進行下一組動畫。step 可以傳入一個跟 wx.createAnimation() 一樣的配置參數(shù)用于指定當(dāng)前組動畫的配置。

示例：

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

Page({
 data: {
  animationData: {}
 },
 onShow: function(){
  var animation = wx.createAnimation({
   duration: 1000,
    timingFunction: 'ease',
  })

  this.animation = animation

  animation.scale(2,2).rotate(45).step()

  this.setData({
   animationData:animation.export()
  })

  setTimeout(function() {
   animation.translate(30).step()
   this.setData({
    animationData:animation.export()
   })
  }.bind(this), 1000)
 },
 rotateAndScale: function () {
  // 旋轉(zhuǎn)同時放大
  this.animation.rotate(45).scale(2, 2).step()
  this.setData({
   animationData: this.animation.export()
  })
 },
 rotateThenScale: function () {
  // 先旋轉(zhuǎn)后放大
  this.animation.rotate(45).step()
  this.animation.scale(2, 2).step()
  this.setData({
   animationData: this.animation.export()
  })
 },
 rotateAndScaleThenTranslate: function () {
  // 先旋轉(zhuǎn)同時放大，然后平移
  this.animation.rotate(45).scale(2, 2).step()
  this.animation.translate(100, 100).step({ duration: 1000 })
  this.setData({
   animationData: this.animation.export()
  })
 }
})

wx.hideKeyboard()

收起鍵盤。

wx.stopPullDownRefresh()

停止當(dāng)前頁面下拉刷新。詳見 頁面相關(guān)事件處理函數(shù)。

以上是“小程序中如何制作消息提示框”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！