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

来源：互联网发布：淘宝商家物流信息编辑：程序博客网时间：2024/05/17 02:03

.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: 30rpx;
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

阅读全文

0 0

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

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