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

.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

你可能感兴趣的:(微信小程序)