微信小程式 自訂訊息提示框，小程式自訂

小程式 自訂訊息提示框，小程式自訂

小程式 自訂訊息提示框

需求描述：

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  }) }})

以上就是小程式 自訂訊息提示框的執行個體，如有疑問請留言或者到本站社區交流討論，感謝閱讀，希望能協助到大家，謝謝大家對本站的支援！