微信小程序 自定義消息提示框
更新時間：2017年08月06日 08:40:38 投稿：lqh
這篇文章主要介紹了微信小程序 自定義消息提示框的相關(guān)資料,wx.showToast(OBJECT)接口調(diào)用，實(shí)現(xiàn)改功能，需要的朋友可以參考下
微信小程序 自定義消息提示框
需求描述：
wx.showToast(OBJECT)接口調(diào)用，但是不需要icon和image，即便image為空也有占位，實(shí)際上只想輸出自定義文本內(nèi)容。
效果截圖：
代碼如下：
<!--index.wxml-->
<!-- 頁面正文 -->
<view>
<block wx:for="{{50}}">
<view> 123456 123456 123456 123456 123456</view>
</block>
</view>
<!-- 自定義彈窗 -->
<view class="showModule" wx:if="{{isShow}}">
<!-- 這部分內(nèi)容可以靈活修改，例如改成一個模態(tài)框 -->
<view class="text ">{{text}}</view>
</view>
/* index.wxss */
.showModule {
/* 用樣式控制隱藏 visibility: hidden;*//* flex 布局 */
display: flex;
justify-content: center;
align-items: center;
/* 生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位 */
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
//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
data: {
text: "彈窗內(nèi)容",
isShow: false
},
onShow() {
this.setData({
text: "用戶取消支付",
isShow: true
})
}
})
以上就是微信小程序 自定義消息提示框的實(shí)例，如有疑問請留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
這篇文章主要介紹了js中關(guān)于promise的用法解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
JS 有名函數(shù)表達(dá)式全面解析,需要的朋友可以參考下。2010-03-03
JavaScript在網(wǎng)頁中畫圓的函數(shù)arc使用方法
這篇文章主要介紹了JavaScript在網(wǎng)頁中畫圓的函數(shù)arc使用方法的相關(guān)資料,需要的朋友可以參考下2015-11-11
這篇文章主要為大家詳細(xì)解析了JS組件Bootstrap Table使用方法，具有一定的實(shí)用性和參考價值，感興趣的小伙伴們可以參考一下2016-11-11
Three.js+React實(shí)現(xiàn)3D文字懸浮效果
這篇文章主要介紹了如何利用Three.js+React制作出神奇的3D文字懸浮效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以動手嘗試一下2022-03-03
JavaScript 函數(shù)柯里化是將一個多參數(shù)的函數(shù)轉(zhuǎn)換為一系列單參數(shù)的函數(shù),每個單參數(shù)函數(shù)都可以接收一個參數(shù),并返回一個新的函數(shù),本文將通過代碼示例給大家講講JavaScript函數(shù)柯里化的優(yōu)缺點(diǎn),需要的朋友可以參考下2023-09-09
本文主要介紹了TypeScript 在函數(shù)、枚舉、類和泛型中的類型兼容性規(guī)則,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01
獲取HTMl文件制定的元素的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2010-04-04
本文介紹了如何使用JavaScript對象添加屬性和方法,通過實(shí)例演示了如何給對象添加屬性,以及如何在對象中定義方法,具有一定的參考價值,感興趣的可以了解一下2023-08-08
本文給大家分享一段給url參數(shù)加密解密的javascript代碼，非常的好用，有需要的小伙伴直接拿走吧2014-11-11