1. 程式人生 > >微信小程式 自定義訊息提示框

微信小程式 自定義訊息提示框

需求描述:
wx.showToast(OBJECT)介面呼叫,但是不需要icon和image,即便image為空也有佔位,實際上只想輸出自定義文字內容。

效果截圖:
這裡寫圖片描述

程式碼如下:

<!--index.wxml-->
<!-- 頁面正文 -->
<view>
  <block wx:for="{{50}}">
    <view> 123456 123456 123456 123456 123456</view>
  </block>
</view>
<!-- 自定義彈窗 -->
<view
class="showModule" wx:if="
{{isShow}}"> <!-- 這部分內容可以靈活修改,例如改成一個模態框 --> <view class="text ">{{text}}</view> </view>
/* index.wxss */

.showModule {
  /* 用樣式控制隱藏  visibility: hidden;*//* flex 佈局 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 生成絕對定位的元素,相對於瀏覽器視窗進行定位 */
position: fixed; /* 如果 height,width 不變的情況下,left,top 不用修改 */ left: 35%; top: 40%; height: 20vh; width: 30vw; /* 不透明 */ opacity: 0.99; background-color: #7b7b7b; /* 圓角 */ border-radius: 30rpx; }
.showModule .text { /* flex 佈局 */ display: flex; /* 字型加粗 */ font-weight: bold; color: white
; font-size: 13pt; font-family: "微軟雅黑"; /* Helvetica, Arial, Hiragino Sans GB, Source Han Sans CN, PingFang SC, Roboto, 微軟雅黑, Heiti SC, Microsoft Yahei, sans-serif; */ }
//index.js
//獲取應用例項
var app = getApp()
Page({
  data: {
    text: "彈窗內容",
    isShow: false
  },
  onShow() {
    this.setData({
      text: "使用者取消支付",
      isShow: true
    })
  }
})