微信小程序之自定义遮罩，显示结果

wxml页面

<!-- 背景-->
<view class="bg" bindtap='hideview' style='display:{{display}}'></view>
<!-- 遮罩信息-->
<view class="show" bindtap='hideview' style='display:{{display}};margin-top:{{wh}}px'><view class="{{isRuleScuTrue?'isRuleShow':'isRuleHide'}}"><view class="icon_succe"></view></view><view class="{{isRuleTrue?'isRuleShow':'isRuleHide'}}"><view class="icon_fail"></view></view><view class="title">{{title}}</view>
</view>

wxss样式

/* 设置背景遮罩层样式 */
.bg {display: none;position: fixed;top: 0%;left: 0%;width: 100%;height: 100%;background-color: black;z-index: 1001;-moz-opacity: 0.7;opacity: 0.70;filter: alpha(opacity=70);
}
/* 设置遮罩上层信息样式 */.show {display: none;text-align: center;position: absolute;top: 5%;left: 0%;width: 100%;height: 100%;padding: 8px;z-index: 1002;overflow: auto;color: red;font-weight: bold;
}
/* 设置背显示 */
.isRuleShow {display: block;
}
/* 设置隐藏 */
.isRuleHide {display: none;
}
/* 设置遮罩上的文本信息 */
.title{margin: 20px;text-align: center;font-size: 20px;
}
/* 设置遮罩上的按钮信息 */
.but{margin: 0 auto;padding: 0px;width: 80%;
}
/* 设置成功的png图片 */
.icon_succe{margin: 0 auto;padding: 0px;width: 128px;height: 128px;background-image: url("data:image/png;base64,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");
}/* 设置失败的png图片 */
.icon_fail{margin: 0 auto;padding: 0px;width: 128px;height: 128px;background-image: url("data:image/png;base64,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");
}

js部分代码

var width = wx.getSystemInfoSync().windowWidth;
var hight = wx.getSystemInfoSync().windowHeight;
var app = getApp()
Page({data: {display: 'block',//默认显示遮罩wh : hight*0.1,//从屏幕的10%开始显示isRuleTrue ：false,isRuleScuTrue :false,},onLoad: function (options) {mes = decodeURIComponent(options.mes)//返回信息if(mes!="1"){//失败this.setData({title: mes,isRuleTrue : true,//显示失败按钮})}else {this.setData({isRuleScuTrue :true,title: '验证成功'})}  },hideview: function() {//隐藏遮罩this.setData({display: "none"})}，showview: function() { //显示遮罩this.setData({display: "block"})},
})

大概效果：失败时

验证成功

微信小程序之自定义遮罩，显示结果相关推荐

微信小程序图标不支持html,微信小程序实现自定义加载图标功能
效果图实现思路 1.首先通过HTML+CSS实现加载动画的静态效果: 2.根据需求给每个动画设计不同的动画效果. 例如第一个加载图标的静态绘制 1.首先确定动画的盒子宽高: 2.设置盒子中每一个长方 ...
微信小程序之自定义模态弹窗（带动画）实例
代码地址如下: http://www.demodashi.com/demo/13991.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序之——自定义分享按钮（完整版）
声明 onShareAppMessage 函数 onShareAppMessage() { return { title: '弹出分享时显示的分享标题' desc: ' ...
【微信小程序】自定义弹窗蒙版输入框效果图完整代码
[微信小程序]自定义弹窗文本输入框效果图&完整代码效果图在输入框中进行内容的输入点击确认后在姓名一栏进行更新修改点击返回后姓名一栏不做任何修改在这个的基础上你可以自定义任何弹窗 wx ...
微信小程序wepy自定义card控件封装
微信小程序wepy自定义card控件在利用wepy开发小程序的过程中,需要使用自定义控件来实现,但是很多时候,若直接在page页面中写对应的控件,下次在另一个页面中,想使用同样的控件又需要重新绑定数 ...
微信小程序可自定义单片机温湿度阈值(基于esp32c3+onenet+微信小程序)
前段时间有个粉丝问我能不能出一个微信小程序调节阈值的教程,我就下班之余在原来的基础上改进一下,因为是修改阈值,这里我就用继电器控制风扇.温度达到一定阈值控制风扇启动来做例子.这个成功了,其他阈值修 ...
微信小程序，自定义导航栏组件
微信小程序,自定义导航栏组件,可兼容iPhone 11及以上留海屏显示,关于参数获取设置参照微信小程序-收藏_羽筠的博客-CSDN博客可定义设置的内容如下: 文字及返回箭头颜色背景图片(优先级高于 ...
php自定义弹窗,微信小程序弹窗自定义的代码
这篇文章主要介绍了微信小程序弹窗自定义实例代码的相关资料,有时候做开发项目的时候需要根据客户需求更改原系统的组件,这里就对小程序中弹窗进行更改,需要的朋友可以参考下微信小程序弹窗首先wxml代 ...
微信小程序实现自定义顶部导航栏（选项卡），固定导航栏和可滑动导航栏
微信小程序实现自定义顶部导航栏(选项卡),固定导航栏和可滑动导航栏固定导航栏可滑动导航栏顶部导航栏的需求实现: 顶部导航栏由列表渲染,通过tabclick点击事件改变activeIndex变量的 ...

微信小程序之自定义遮罩，显示结果

微信小程序之自定义遮罩，显示结果相关推荐

最新文章

热门文章