[微信小程序]实现一个自定义遮罩层组件(完整示例代码附效果图)

微信小程序开发交流qq群 173683895

承接微信小程序开发。扫码加微信。

正文：

先上效果图: 点击按钮Show显示遮罩层,再次点击屏幕任何地方隐藏遮罩层;

<button bindtap="showview">Show</button>
<view class="bg" bindtap='hideview' style='display:{{display}}'></view>
<view class="show" bindtap='hideview' style='display:{{display}}'>申请成功
<view class='txt'>您的密码为:123456</view>
</view>

.bg {display: none;position: absolute;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: 45%;left: 20%;width: 53%;height: 10%;padding: 8px;border: 8px solid #e8e9f7;background-color: white;z-index: 1002;overflow: auto;
}
.txt{margin-top: 20rpx;font-size: 28rpx;color: royalblue
}

Page({data: {display:''},showview: function() { this.setData({display: "block"})},hideview: function() {this.setData({display: "none"})}
})

[微信小程序]实现一个自定义遮罩层组件(完整示例代码附效果图)相关推荐

微信小程序和微信小程序之间的跳转和传参示例代码附讲解
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 一:微信小程序跳转使用限制需要用户触发跳转从 2.3.0 版本开始,若用户未点击小程序页面任意位 ...
微信小程序左滑删除效果的实现完整源码附效果图
效果图: 功能描述,小程序列表左滑删除功能的实现完整源代码实现: <view wx:for='{{friends}}' wx:key="" wx:if='{{groupTyp ...
微信小程序输入账号密码点击按钮登录事件示例代码
微信小程序登录事件示例代码如下: 在页面的wxml文件中定义账号密码输入框和登录按钮: <view><input type="text" placeholder= ...
微信小程序页面滚动条穿透遮罩层解决方案
假设你在遮罩层中写了一个pop窗可以通过中断捕获阶段和取消冒泡阶段capture-catch控制手指触摸后移动 capture-catch:touchmove 例子 // 底部的内容盒子 <d ...
微信小程序 - 解决弹框遮罩层的滚动穿透问题
在小程序页面里有自定义弹窗时候,发现弹窗外滚动的时候,底部背景页面也会跟随滚动.面对这个bug,我们可以用下面几种方法实现: 方法1:catchtouchmove="true" 可 ...
微信小程序下拉刷新真机没效果_微信小程序下拉刷新上拉加载(示例代码)
1.下拉刷新小程序页面集成了下拉功能,并提供了接口,我们只需要一些配置就可以拿到事件的回调. 1. 需要在 .json 文件中配置. 如果配置在app.json文件中,那么整个程序都可以下拉刷新.如 ...
微信小程序实现一个手势图案锁组件
说在前面
微信小程序实现输入车牌号码的功能vue版（附效果图）
1,车牌第一位时选择录入图: 2,输入车牌第二位及后面的号码选择图 3 ,换普通车牌图下面是完整代码 <template><view class="container&q ...
微信小程序之wx:if视图层的条件渲染 —— 微信小程序教程系列（10）
使用wx:if进行视图层的条件渲染示例: wxml:使用view  <button bindtap="EventHandle" ...

[微信小程序]实现一个自定义遮罩层组件(完整示例代码附效果图)

承接微信小程序开发。扫码加微信。

正文：

[微信小程序]实现一个自定义遮罩层组件(完整示例代码附效果图)相关推荐

最新文章

热门文章