微信小程序開(kāi)發(fā)中怎么使用toast等彈框提示-創(chuàng)新互聯(lián)

本文小編為大家詳細(xì)介紹“微信小程序開(kāi)發(fā)中怎么使用toast等彈框提示”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“微信小程序開(kāi)發(fā)中怎么使用toast等彈框提示”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

創(chuàng)新互聯(lián)建站專業(yè)提供成都主機(jī)托管四川主機(jī)托管成都服務(wù)器托管四川服務(wù)器托管，支持按月付款！我們的承諾：貴族品質(zhì)、平民價(jià)格，機(jī)房位于中國(guó)電信/網(wǎng)通/移動(dòng)機(jī)房，成都聯(lián)通服務(wù)器托管服務(wù)有保障！

介紹

微信小程序中toast消息提示框只有兩種顯示的效果，就是成功和加載，使用wx.showToast(OBJECT) 。

看下有關(guān)參數(shù)說(shuō)明：

代碼很簡(jiǎn)單：

 wx.showToast({
 title: '成功',
 icon: 'succes',
 duration: 1000,
 mask:true
 })

mask屬性好像并沒(méi)有起作用。有一點(diǎn)值得注意的是提示的延遲時(shí)間是有限制的，較大10000毫秒。

還有一個(gè)函數(shù)是wx.hideToast() ，這個(gè)是隱藏toast，主要用于顯示加載提示的時(shí)候用到，如：

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

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

本來(lái)加載時(shí)間是10000毫秒的，然后2000毫秒的時(shí)候就隱藏了，這個(gè)具體情況而定了哈。

第二個(gè)彈窗是模態(tài)彈窗：wx.showModal(OBJECT)

參數(shù)如下：

這個(gè)跟我們Android里面的Dialog相似，效果如下：

代碼如下：

 wx.showModal({
 title: '提示',
 content: '模態(tài)彈窗',
 success: function (res) {
 if (res.confirm) {
 console.log('用戶點(diǎn)擊確定')
 }else{
 console.log('用戶點(diǎn)擊取消')
 }

 }
 })

最后一個(gè)是操作菜單：wx.showActionSheet(OBJECT)

這個(gè)函數(shù)我們?cè)谏弦黄恼掠眠^(guò)，這里說(shuō)一下也無(wú)妨。

先看一下參數(shù)介紹：

success有一個(gè)返回參數(shù)：

這里直接貼官方實(shí)例了：

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

效果圖：

這里有個(gè)小問(wèn)題，彈出showActionSheet之后，點(diǎn)擊取消或者陰影處，會(huì)執(zhí)行完fail之后，繼續(xù)執(zhí)行success函數(shù)，當(dāng)然了，這里肯定有辦法解決的，success其實(shí)有兩個(gè)返回參數(shù)，除了tapIndex之外，還有一個(gè)就是cancle，cancle就是是否取消，返回一個(gè)boolean，在彈出這個(gè)框之后在success里面做個(gè)判斷，if (!res.cancel) {做不取消的操作就行了}。當(dāng)然了，你也可以自己來(lái)定義。

下面看個(gè)自定義彈窗的：

wxml:

 <view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
 <view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}" bindtap="navigate">
 <text class="title">{{title}}</text>
 </view>

css:

.commodity_screen {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 background: #000;
 opacity: 0.2;
 overflow: hidden;
 z-index: 1000;
 color: #fff;
}

.commodity_attr_box {
 width: 100%;
 overflow: hidden;
 position: fixed;
 bottom: 0;
 left: 0;
 z-index: 2000;
 height: 60px;
 background: #fff;

}

.title {
 height: 100%;
 width: 100%;
 position: fixed;
 text-align: center;
 margin-top: 20px;
 margin-bottom: 20px;

}

js:

 showView() {
 // 顯示遮罩層
 var animation = wx.createAnimation({
 duration: 200,
 timingFunction: "linear",
 delay: 0
 })
 this.animation = animation
 animation.translateY(300).step()
 this.setData({
 animationData: animation.export(),
 showModalStatus: true
 })
 setTimeout(function () {
 animation.translateY(0).step()
 this.setData({
 animationData: animation.export()
 })
 }.bind(this), 200)
 },

 hideModal: function () {
 this.hideView();
 },

 hideView() {
 // 隱藏遮罩層
 var animation = wx.createAnimation({
 duration: 200,
 timingFunction: "linear",
 delay: 0
 })
 this.animation = animation
 animation.translateY(300).step()
 this.setData({
 animationData: animation.export(),
 })
 setTimeout(function () {
 animation.translateY(0).step()
 this.setData({
 animationData: animation.export(),
 showModalStatus: false
 })
 }.bind(this), 200)
 }

啟用動(dòng)畫(huà)來(lái)做，效果杠杠的，自己動(dòng)手來(lái)試試。

也可以使用action-sheet來(lái)布局，如下：

 <action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange">
 <block wx:for-items="{{actionSheetItems}}">
 <action-sheet-item class="item" bindtap="bind{{item}}">{{item}}</action-sheet-item>
 </block>
 <action-sheet-cancel class="cancel">取消</action-sheet-cancel>
</action-sheet>

Page({
data: {
 actionSheetHidden: true,
 actionSheetItems: items
 },
 actionSheetTap: function(e) {
 this.setData({
 actionSheetHidden: !this.data.actionSheetHidden
 })
 },
 actionSheetChange: function(e) {
 this.setData({
 actionSheetHidden: !this.data.actionSheetHidden
 })
 }
}
})

讀到這里，這篇“微信小程序開(kāi)發(fā)中怎么使用toast等彈框提示”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站名稱：微信小程序開(kāi)發(fā)中怎么使用toast等彈框提示-創(chuàng)新互聯(lián)
轉(zhuǎn)載來(lái)源：http://bm7419.com/article40/ggceo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)、品牌網(wǎng)站制作、定制網(wǎng)站、商城網(wǎng)站、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)