微信小程序 利用css实现遮罩效果实例详解


Posted in Javascript onJanuary 21, 2017

微信小程序 利用css实现遮罩效果实例详解

实现效果图:

微信小程序 利用css实现遮罩效果实例详解

如图所示,使用css实现小程序的遮罩效果,代码如下

js文件代码:

//index.js 
//获取应用实例 
var app = getApp() 
Page({ 
 data: { 
 flag: false 
 }, 
 a: function(){ 
 this.setData({flag: false}) 
 }, 
 b: function(){ 
 this.setData({flag: true}) 
 } 
})

wxss文件代码:

.b1{position:fixed;width:100%;height:100%;top:0px;background:rgba(0,0,0,0.4);overflow: hidden;} 
.t_w{position:relative;} 
.b2{width: 90%;margin:35% auto;overflow: hidden;background-color: #fff;border-radius: 10rpx;} 
.v1{margin:110rpx auto 30rpx auto;color:#999;font-size:28rpx;background-color: #fff;padding:0rpx 30rpx;text-align: center;} 
.v2{background-color: #ff0000;padding:20rpx 0rpx;text-align: center;overflow: hidden;} 
.v3{background-color: deepskyblue;padding:20rpx 0rpx;text-align: center;overflow: hidden;} 
.p1{display: block;margin:10rpx auto;font-size: 34rpx;height:34rpx;line-height:34rpx;color: #ffffff;} 
.p2{display: block;margin:10rpx auto;font-size: 24rpx;height:24rpx;line-height:24rpx;color: #ffffff;} 
.t_image{width:204rpx;height:200rpx;position: absolute;top: -26%;left:40%;} 
.t_image1{display:block;width:204rpx;height:200rpx;} 
.btn1{border:1px solid transparent;outline:none;margin:0rpx auto;-webkit-appearance: none;-moz-appearance: none;height: 88rpx;line-height: 88rpx;width:630rpx;border-radius: 60rpx;font-family: '微软雅黑';font-size: 36rpx;color: #ffffff;cursor: pointer;background-color: #f05000;text-align: center;box-shadow:0rpx 10rpx 9rpx 0rpx rgba(240,80,0,0.35); 
} 
.btn2{margin:30rpx auto 40rpx auto;border:1px solid transparent;outline:none;-webkit-appearance: none;-moz-appearance: none;height: 88rpx;line-height: 88rpx;width:630rpx;border-radius: 60rpx;font-family: '微软雅黑';font-size: 36rpx;color: #ffffff;cursor: pointer;background-color: #5adad0;text-align: center;box-shadow:0rpx 10rpx 9rpx 0rpx rgba(90,218,208,0.35); 
}

wxml文件代码:

<view class="b1" hidden="{{flag}}"> 
   <view class="t_w"> 
    <view class="t_image"> 
            <image class="t_image1" src="../../images/qcm.png"></image> 
     </view> 
      <view class="b2"> 
         
        <view class="v1">由于您周边3公里有没有指尖快递服务站,指尖快递将无法为您提供上门取件服务。您可以试试拨打电话或网上预约快递公司。</view> 
        <view class="btn1" bindtap="b"> 
          <p class="p1">拨打电话</p> 
          <p class="p2">可拨打电话直接与快递公司联系哦</p> 
        </view> 
        <view class="btn2" bindtap="b"> 
          <p class="p1">网上预约快递公司</p> 
          <p class="p2">快递公司可能无法及时响应,请耐心等待哦</p> 
        </view> 
      </view> 
   </view> 
</view> 
 
<view bindtap="a">显示</view>

到此位置,demo已经完成

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
js禁止回车提交表单的示例代码
Dec 23 Javascript
动态加载jquery库的方法
Feb 12 Javascript
jquery实现pager控件示例
Apr 09 Javascript
js实现刷新iframe的方法汇总
Apr 27 Javascript
基于angularJS的表单验证指令介绍
Oct 21 Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 Javascript
Angular2.js实现表单验证详解
Jun 23 Javascript
vue实现点击展开点击收起效果
Apr 27 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
Jun 05 Javascript
使用zrender.js绘制体温单效果
Oct 31 Javascript
vue模块移动组件的实现示例
May 20 Javascript
JavaScript数组去重的6个方法
Jan 21 #Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
Jan 21 #Javascript
JS常用知识点整理
Jan 21 #Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 #Javascript
原生js实现可拖动的登录框效果
Jan 21 #Javascript
微信小程序 WebSocket详解及应用
Jan 21 #Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
Jan 21 #Javascript
You might like
PHP 5.0 Pear安装方法
2006/12/06 PHP
常用的php ADODB使用方法集锦
2008/03/25 PHP
使用pthreads实现真正的PHP多线程(需PHP5.3以上版本)
2014/05/05 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
Smarty日期时间操作方法示例
2016/11/15 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
2007/08/21 Javascript
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
Javascript和Ajax中文乱码吐血版解决方案
2009/12/21 Javascript
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
Jquery submit()无法提交问题
2013/04/21 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
AngularJS 过滤器的简单实例
2016/07/27 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
2020/08/07 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
Python的内存泄漏及gc模块的使用分析
2014/07/16 Python
MySQL中表的复制以及大型数据表的备份教程
2015/11/25 Python
python使用tkinter实现简单计算器
2018/01/30 Python
Python json读写方式和字典相互转化
2020/04/18 Python
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
伯利陶器:Burleigh Pottery
2018/01/03 全球购物
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
存储过程的优点有哪些
2012/09/27 面试题
新闻编辑自荐书范文
2014/02/12 职场文书
办公室岗位职责
2015/02/04 职场文书
工作失职检讨书范文
2015/05/05 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书