1. 程式人生 > >微信小程式的提示框 showToast 和 showLoading

微信小程式的提示框 showToast 和 showLoading

使用者操作得到即時反饋,這是很好的使用者體驗,所以我們經常會使用提示框來反饋一些簡簡訊息。提示框顯示後,通常自己關閉,對使用者的打擾降到最低。下面簡單對比一下常用兩個顯示對話方塊方式:

showToast 和 showLoading

wx.showToast()

wx.showLoading()

引數

title

icon

image

duration

mask

title

mask

關閉方法

設定duration,定時關閉;

使用wx.hideToast()關閉

只能用wx.hideLoading()關閉
icon

success

loading

none

固定顯示載入icon

showToast 舉例:

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

showLoading 舉例,在發起網路請求前顯示“載入中...”,在結束時關閉資訊:

wx.showLoading({
  title: '載入中...',
})

wx.request({
  url: ...,
  ...,
  success: (res) => {
  },
  fail: () => {},
  complete: () => {
    wx.hideLoading()
  }
})

相關推薦

程式提示 showToast showLoading

使用者操作得到即時反饋,這是很好的使用者體驗,所以我們經常會使用提示框來反饋一些簡簡訊息。提示框顯示後,通常自己關閉,對使用者的打擾降到最低。下面簡單對比一下常用兩個顯示對話方塊方式: showToast 和 showLoading wx.showTo

程式裡使用 watch computed

在開發 vue 的時候,我們可以使用 watch 和 computed 很方便的檢測資料的變化,從而做出相應的改變,但是在小程式裡,只能在資料改變時手動觸發 this.setData(),那麼如何給小程式也加上這兩個功能呢? 我們知道在 vue 裡是通過 Object.defineProperty 來實現資

程式裡 wx:forwx:for-item區別(補充下wx:key)

 wx:for 一維陣列情況: 在頁面上 view  wx:for  ="{{list}}"   {{item.id}} view 是迴圈list item是List的別名 多維陣列情況: view  wx:fo

程式效果解析

先上程式碼 wxml部分: <view class='top' bindtap='powerDrawer' data-statu="open" data-num='300'> <text>向上彈起</text> </view> <

程式輸入屬性 cursor-spacing 問題

微信小程式輸入框屬性 cursor-spacing 問題 問題描述 微信小程式給輸入框提供了屬性 cursor-spacing,用處是聚焦時游標離軟鍵盤的距離,但是在安卓機子上會出現不太好使,比如,沒有達到預期的設定值,還有滑動到底部,設定的值不起作用。 解決方

程式輸入會字型顯示不全或者換行

微信小程式輸入框會字型顯示不全或者換行 問題描述 有的時候不同的裝置上會出現微信小程式輸入框表現不一致,比如:換行,字型顯示不全 解決方案 用開發者工具除錯發現,input,textarea 有預設的 weight or height,並且是 rem 為單位

程式下拉重新整理上拉載入

example One:如果所有頁面都要開啟下拉重新整理功能: aap.json中: "window":{       "enablePullDownRefresh":true, //開啟下拉重新整理功能       "navigatio

1-程式開發(安裝軟體執行第一個程式)

https://developers.weixin.qq.com/miniprogram/dev/                     我的   &nbs

程式下拉載入上拉重新整理兩種實現方法

方法一:onPullDownRefresh和onReachBottom方法實現小程式下拉載入和上拉重新整理 首先要在json檔案裡設定window屬性             屬性  

程式上拉重新整理下拉載入2種方法實現

微信小程式上拉重新整理和下拉載入2種方法實現,onPullDownRefresh,scroll-view使用 一、XXX.json開啟下拉重新整理 {    "enablePullDownRefresh": true }   二、XXX.js onP

程式獲取UnionID機制出現的問題

前段時間做了一個小程式的專案,在小程式支付的時候出現了一個問題,導致小程式稽核不通過,稽核不通過的原因說是虛擬支付,出現這個問題的原因是因為微信小程式的支付IOS是不能支付的,所以就不能通過,這個時候我們就出了一套方案就是在小程式中IOS使用者是不能進行支付產品

程式搜尋自動補全功能

▶動態效果圖◀   ▶效果涉及到的input屬性◀ focus     Boolean     false     獲取焦點      bindinput &nb

程式裡面的標籤html標籤的對比、程式基礎之常用控制元件

微信小程式和html5標籤的區別: HTML5 微信小程式 <h1></h1>...<h6></h6> <p>&l

程式輸入鍵盤彈出使得佈局上移問題

input輸入框這一模組使用position:fixed固定在頁面底部,通過adjust-position的值來控制鍵盤彈起時是否自動上推頁面,通過bindfocus來獲取鍵盤高度,使input輸入框聚焦時跟隨鍵盤上移而不被遮擋,輸入框失去焦點時觸發bindblur事件,輸入

理解程式的生命週期執行原理

  寫微信小程式,他的生命週期不能不知道,不知道小程式就會出現各種bug而無法解決。小助君公眾號帶你學習小程式的生命週期和執行原理。 小程式由兩大執行緒組成:負責介面的執行緒(view thread)和服務執行緒(appservice thread),各司其職由互相配合 小程式的生命週期借

程式tabBar的顯示跳轉問題

    如下圖所示,我們按照小程式官方文件,分別在pages目錄下建立test1和test2兩個頁面。然後在app.json下注冊。按理說在左側模擬器下邊會出現一個導航欄。可是事與願違,偵錯程式也沒有報

程式input在某些手機上獲取資料失敗

因為加了有資料為空不允許提交的判斷,測試的時候發現有的手機總是提示有資料為空,不能提交, 測試之後發現是填寫手機號的input框type型別為number,然後寫了三個框分別獲取資料, type型別分別為digit(帶小數點的數字鍵盤)、number、text,結果如下圖: 只有t

程式中使用者登入登入態維護

提供使用者登入以及維護使用者的登入狀態,是一個擁有使用者系統的軟體應用普遍需要做的事情。像微信這樣的一個社交平臺,如果做一個小程式應用,我們可能很少會去做一個完全脫離和捨棄連線使用者資訊的純工具軟體。讓使用者登入,標識使用者和獲取使用者資訊,以使用者為核心提供服務,是大部分小程式都會做的事情。我們今天就來了解

程式獲取使用者頭像暱稱

程式碼user.wxml: <view > <view> <image class="avatar" src='{{userInfo.avatarUrl}}'&g

(乾貨)程式之上傳圖片圖片預覽

這幾天一直負責做微信小程式這一塊,也可以說是邊做邊學習吧,把自己做的微信小程式的一些功能分享出來,與大家探討一下,相互學習相互進步。先看下效果圖只寫了一下效果樣式的話希望大家不要太在意,下面馬路殺手要開車了。1.wxml排版和佈局  這個排版非常簡單就是一個按鈕button加