微信小程序 自定义消息提示框

.wxml 文件

< view class= "showModule" wx:if= "{{isShow}}" >

<!-- 这部分内容可以灵活修改，例如改成一个模态框 -->

< view class= "text ">{{text}} </ view >

</ view >

.wxss 文件

.showModule {

/* 用样式控制隐藏 visibility: hidden;*//* flex 布局 */

display: flex;

justify-content: center;

align-items: center;

/* 生成绝对定位的元素，相对于浏览器窗口进行定位 */

position: fixed;

/* 如果 height,width 不变的情况下，left,top 不用修改 */

left: 25%;

top: 20%;

height: 10vh;

width: 50vw;

/* 不透明 */

opacity: 1;

background-color: #3B3B3B;

/* 圆角 */

border-radius: 30 rpx;

z-index: 3001;

}

.showModule .text {

/* flex 布局 */

display: flex;

/* 字体加粗 */

color: white;

font-size: 13px;

}

.js 文件

Page({

data: {

isShow: false //

},

showToast: function(e){ //方法

var that = this

that.setData({

isShow: true ,

text:e

})

setTimeout( function(){

that.setData({

isShow: false

})

}, 500)

}

 // 调用

var failtitl = "组件已经全部使用完毕."

this.showToast(failtitl)

参考 ： http://blog.csdn.net/xiaochun365/article/details/75370850