微信小程序-消息提示框?qū)嵗?/h1>
更新時(shí)間:2016年11月24日 15:00:17 作者:奮進(jìn)程序猿
本篇文章主要介紹了微信小程序-提示框,現(xiàn)在分享給大家,也給大家做個(gè)參考。感興趣的小伙伴們可以參考一下。
做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)前頁面的標(biāo)題。
OBJECT參數(shù)說明:
示例代碼:
wx.setNavigationBarTitle({
title: '當(dāng)前頁面'
})
wx.showNavigationBarLoading()
在當(dāng)前頁面顯示導(dǎo)航條加載動(dòng)畫。
wx.hideNavigationBarLoading()
隱藏導(dǎo)航條加載動(dòng)畫。
頁面跳轉(zhuǎn):
wx.navigateTo(OBJECT)
保留當(dāng)前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面,使用wx.navigateBack可以返回到原頁面。
OBJECT參數(shù)說明:
示例代碼:
wx.navigateTo({
url: 'test?id=1'
})
//test.js
Page({
onLoad: function(option){
console.log(option.query)
}
})
注意:為了不讓用戶在使用小程序時(shí)造成困擾,我們規(guī)定頁面路徑只能是五層,請盡量避免多層級(jí)的交互方式。
wx.redirectTo(OBJECT)
關(guān)閉當(dāng)前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面。
OBJECT參數(shù)說明:
示例代碼:
wx.redirectTo({
url: 'test?id=1'
})
wx.navigateBack(OBJECT)
關(guān)閉當(dāng)前頁面,返回上一頁面或多級(jí)頁面??赏ㄟ^ getCurrentPages()) 獲取當(dāng)前的頁面棧,決定需要返回幾層。
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({ duration: 1000 })
this.setData({
animationData: this.animation.export()
})
}
})
wx.hideKeyboard()
收起鍵盤。
wx.stopPullDownRefresh()
停止當(dāng)前頁面下拉刷新。詳見 頁面相關(guān)事件處理函數(shù)。
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:- 微信小程序-詳解微信登陸、微信支付、模板消息
- C#開發(fā)之微信小程序發(fā)送模板消息功能
- 微信小程序-滾動(dòng)消息通知的實(shí)例代碼
- 微信小程序 消息推送php服務(wù)器驗(yàn)證實(shí)例詳解
- 微信小程序 自定義消息提示框
- 微信小程序中實(shí)現(xiàn)一對(duì)多發(fā)消息詳解及實(shí)例代碼
- 微信小程序?qū)崿F(xiàn)滾動(dòng)消息通知
- 微信小程序使用toast消息對(duì)話框提示用戶忘記輸入用戶名或密碼功能【附源碼下載】
- node.js微信小程序配置消息推送的實(shí)現(xiàn)
- 微信小程序?qū)崿F(xiàn)發(fā)送模板消息功能示例【通過openid推送消息給用戶】
相關(guān)文章
-
動(dòng)態(tài)讀取JSON解析鍵值對(duì)的方法
這篇文章主要介紹了動(dòng)態(tài)讀取JSON解析鍵值對(duì)的方法,需要的朋友可以參考下 2014-06-06
-
JavaScript 加號(hào)(+)運(yùn)算符號(hào)
在一些框架中看到了類似這樣的寫法:+new Date();感覺有些怪,查閱了相關(guān)資料和一些網(wǎng)友的幫助.對(duì)此用法解釋如下,希望對(duì)大家有所幫助,不合適的地方請大家指正!
2009-12-12
-
js插件dropload上拉下滑加載數(shù)據(jù)實(shí)例解析
這篇文章主要為大家詳細(xì)解析了js插件dropload上拉下滑加載數(shù)據(jù)實(shí)例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下 2016-07-07
-
在原生不支持的舊環(huán)境中添加兼容的Object.keys實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄谠恢С值呐f環(huán)境中添加兼容的Object.keys實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧 2017-09-09
-
使用JS-SDK開發(fā)公眾號(hào)微信網(wǎng)頁的完整步驟
微信JS-SDK是微信公眾平臺(tái) 面向網(wǎng)頁開發(fā)者提供的基于微信內(nèi)的網(wǎng)頁開發(fā)工具包,下面這篇文章主要介紹了使用JS-SDK開發(fā)公眾號(hào)微信網(wǎng)頁的完整步驟,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下 2025-04-04
-
微信小程序判斷手機(jī)號(hào)是否合法的實(shí)例代碼
我們在微信小程序開發(fā)的時(shí)候,手機(jī)號(hào)的驗(yàn)證是經(jīng)常需要操作的,那么如何驗(yàn)證手機(jī)號(hào)呢?這篇文章主要給大家介紹了關(guān)于微信小程序判斷手機(jī)號(hào)是否合法的相關(guān)資料,需要的朋友可以參考下 2021-09-09
-
了解在JavaScript中將值轉(zhuǎn)換為字符串的5種方法
這篇文章主要介紹了在JavaScript中將值轉(zhuǎn)換為字符串的5種方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,下面小編就和大家一起來學(xué)習(xí)下吧 2019-06-06
-
JavaScript動(dòng)態(tài)操作select下拉框
這篇文章介紹了JavaScript動(dòng)態(tài)操作select下拉框的方法,文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下 2022-04-04
最新評(píng)論
做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)前頁面的標(biāo)題。
OBJECT參數(shù)說明:
示例代碼:
wx.setNavigationBarTitle({
title: '當(dāng)前頁面'
})
wx.showNavigationBarLoading()
在當(dāng)前頁面顯示導(dǎo)航條加載動(dòng)畫。
wx.hideNavigationBarLoading()
隱藏導(dǎo)航條加載動(dòng)畫。
頁面跳轉(zhuǎn):
wx.navigateTo(OBJECT)
保留當(dāng)前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面,使用wx.navigateBack可以返回到原頁面。
OBJECT參數(shù)說明:
示例代碼:
wx.navigateTo({
url: 'test?id=1'
})
//test.js
Page({
onLoad: function(option){
console.log(option.query)
}
})
注意:為了不讓用戶在使用小程序時(shí)造成困擾,我們規(guī)定頁面路徑只能是五層,請盡量避免多層級(jí)的交互方式。
wx.redirectTo(OBJECT)
關(guān)閉當(dāng)前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面。
OBJECT參數(shù)說明:
示例代碼:
wx.redirectTo({
url: 'test?id=1'
})
wx.navigateBack(OBJECT)
關(guān)閉當(dāng)前頁面,返回上一頁面或多級(jí)頁面??赏ㄟ^ getCurrentPages()) 獲取當(dāng)前的頁面棧,決定需要返回幾層。
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({ duration: 1000 })
this.setData({
animationData: this.animation.export()
})
}
})
wx.hideKeyboard()
收起鍵盤。
wx.stopPullDownRefresh()
停止當(dāng)前頁面下拉刷新。詳見 頁面相關(guān)事件處理函數(shù)。
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序-詳解微信登陸、微信支付、模板消息
- C#開發(fā)之微信小程序發(fā)送模板消息功能
- 微信小程序-滾動(dòng)消息通知的實(shí)例代碼
- 微信小程序 消息推送php服務(wù)器驗(yàn)證實(shí)例詳解
- 微信小程序 自定義消息提示框
- 微信小程序中實(shí)現(xiàn)一對(duì)多發(fā)消息詳解及實(shí)例代碼
- 微信小程序?qū)崿F(xiàn)滾動(dòng)消息通知
- 微信小程序使用toast消息對(duì)話框提示用戶忘記輸入用戶名或密碼功能【附源碼下載】
- node.js微信小程序配置消息推送的實(shí)現(xiàn)
- 微信小程序?qū)崿F(xiàn)發(fā)送模板消息功能示例【通過openid推送消息給用戶】
相關(guān)文章
動(dòng)態(tài)讀取JSON解析鍵值對(duì)的方法
這篇文章主要介紹了動(dòng)態(tài)讀取JSON解析鍵值對(duì)的方法,需要的朋友可以參考下2014-06-06
JavaScript 加號(hào)(+)運(yùn)算符號(hào)
在一些框架中看到了類似這樣的寫法:+new Date();感覺有些怪,查閱了相關(guān)資料和一些網(wǎng)友的幫助.對(duì)此用法解釋如下,希望對(duì)大家有所幫助,不合適的地方請大家指正!2009-12-12
js插件dropload上拉下滑加載數(shù)據(jù)實(shí)例解析
這篇文章主要為大家詳細(xì)解析了js插件dropload上拉下滑加載數(shù)據(jù)實(shí)例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-07-07
在原生不支持的舊環(huán)境中添加兼容的Object.keys實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄谠恢С值呐f環(huán)境中添加兼容的Object.keys實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
使用JS-SDK開發(fā)公眾號(hào)微信網(wǎng)頁的完整步驟
微信JS-SDK是微信公眾平臺(tái) 面向網(wǎng)頁開發(fā)者提供的基于微信內(nèi)的網(wǎng)頁開發(fā)工具包,下面這篇文章主要介紹了使用JS-SDK開發(fā)公眾號(hào)微信網(wǎng)頁的完整步驟,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-04-04
微信小程序判斷手機(jī)號(hào)是否合法的實(shí)例代碼
我們在微信小程序開發(fā)的時(shí)候,手機(jī)號(hào)的驗(yàn)證是經(jīng)常需要操作的,那么如何驗(yàn)證手機(jī)號(hào)呢?這篇文章主要給大家介紹了關(guān)于微信小程序判斷手機(jī)號(hào)是否合法的相關(guān)資料,需要的朋友可以參考下2021-09-09
了解在JavaScript中將值轉(zhuǎn)換為字符串的5種方法
這篇文章主要介紹了在JavaScript中將值轉(zhuǎn)換為字符串的5種方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,下面小編就和大家一起來學(xué)習(xí)下吧2019-06-06
JavaScript動(dòng)態(tài)操作select下拉框
這篇文章介紹了JavaScript動(dòng)態(tài)操作select下拉框的方法,文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-04-04

