【移動(dòng)應(yīng)用開發(fā)技術(shù)】小程序中如何制作消息提示框

【移動(dòng)應(yīng)用開發(fā)技術(shù)】小程序中如何制作消息提示框

這篇文章主要介紹小程序中如何制作消息提示框，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！做Android的時(shí)候?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:

'這是一個(gè)模態(tài)彈窗',

success:

function(res)

{

if

(res.confirm)

{

console.log('用戶點(diǎn)擊確定')

}

}

})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)動(dòng)態(tài)設(shè)置當(dāng)前頁(yè)面的標(biāo)題。OBJECT參數(shù)說明：示例代碼：wx.setNavigationBarTitle({

title:

'當(dāng)前頁(yè)面'

})wx.showNavigationBarLoading()在當(dāng)前頁(yè)面顯示導(dǎo)航條加載動(dòng)畫。wx.hideNavigationBarLoading()隱藏導(dǎo)航條加載動(dòng)畫。頁(yè)面跳轉(zhuǎn)：wx.navigateTo(OBJECT)保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面，使用wx.navigateBack可以返回到原頁(yè)面。OBJECT參數(shù)說明：示例代碼：wx.navigateTo({

url:

'test?id=1'

})//test.js

Page({

onLoad:

function(option){

console.log(option.query)

}

})注意：為了不讓用戶在使用小程序時(shí)造成困擾，我們規(guī)定頁(yè)面路徑只能是五層，請(qǐng)盡量避免多層級(jí)的交互方式。wx.redirectTo(OBJECT)關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。OBJECT參數(shù)說明：示例代碼：wx.redirectTo({

url:

'test?id=1'

})wx.navigateBack(OBJECT)關(guān)閉當(dāng)前頁(yè)面，返回上一頁(yè)面或多級(jí)頁(yè)面。可通過getCurrentPages())獲取當(dāng)前的頁(yè)面棧，決定需要返回幾層。OBJECT參數(shù)說明：動(dòng)畫：wx.createAnimation(OBJECT)創(chuàng)建一個(gè)動(dòng)畫實(shí)例animation。調(diào)用實(shí)例的方法來描述動(dòng)畫。最后通過動(dòng)畫實(shí)例的export方法導(dǎo)出動(dòng)畫數(shù)據(jù)傳遞給組件的animation屬性。注意:export方法每次調(diào)用后會(huì)清掉之前的動(dòng)畫操作OBJECT參數(shù)說明：var

animation

=

wx.createAnimation({

transformOrigin:

"50%

50%",

duration:

1000,

timingFunction:

"ease",

delay:

0

})animation動(dòng)畫實(shí)例可以調(diào)用以下方法來描述動(dòng)畫，調(diào)用結(jié)束后會(huì)返回自身，支持鏈?zhǔn)秸{(diào)用的寫法。樣式：旋轉(zhuǎn)：縮放：偏移：傾斜：矩陣變形：動(dòng)畫隊(duì)列調(diào)用動(dòng)畫操作方法后要調(diào)用step()來表示一組動(dòng)畫完成，可以在一組動(dòng)畫中調(diào)用任意多個(gè)動(dòng)畫方法，一組動(dòng)畫中的所有動(dòng)畫會(huì)同時(shí)開始，一組動(dòng)畫完成后才會(huì)進(jìn)行下一組動(dòng)畫。step可以傳入一個(gè)跟wx.createAnimation()一樣的配置參數(shù)用于指定當(dāng)前組動(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)同時(shí)放大

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)同時(shí)放大，然后平移

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

2).step()

this.animation.translate(100,

100).step({

duratio