微信小程序 之提示框

结构可自行修改

<view class="showModule" wx:if="{{isShow}}" >
	<!-- 这部分内容可以灵活修改，例如改成一个模态框 -->
	<view class="text ">{{text}}</view>
</view>

.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;
}

Page({
	data: {
		isShow: false //
	},
	showToast:function(e){ //方法
		var that = this
		that.setData({
		isShow: true ,
		text:e
	})
	setTimeout(function(){
		that.setData({
		isShow: false
		})
	},1000)
}

在需要用到的地方调用

	//传入提示框的内容
	var failtitl = "成功."
	this.showToast(failtitl)