微信小程序 利用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 相关文章推荐
破除网页鼠标右键被禁用的绝招大全
Dec 27 Javascript
js下判断 iframe 是否加载完成的完美方法
Oct 26 Javascript
JS在IE下缺少标识符的错误
Jul 23 Javascript
js关于命名空间的函数实例
Feb 05 Javascript
浅谈JavaScript异常处理语句
Jun 26 Javascript
关于session和cookie的简单理解
Jun 08 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
在vue中使用echarts图表实例代码详解
Oct 22 Javascript
详解Vue之父子组件传值
Apr 01 Javascript
Vue组件实现触底判断
Jun 26 Javascript
js实现简易计算器功能
Oct 18 Javascript
JS ES6异步解决方案
Apr 29 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 检查扩展库或函数是否可用的代码
2010/04/06 PHP
PHP判断远程图片是否存在的几种方法
2014/05/04 PHP
php之Smarty模板使用方法示例详解
2014/07/08 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
WAMP环境中扩展oracle函数库(oci)
2015/06/26 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
JavaScript 直接操作本地文件的实现代码
2009/12/01 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
2013/01/10 Javascript
js禁止回车提交表单的示例代码
2013/12/23 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
JavaScript中toString()方法的使用详解
2015/06/05 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
使用jquery datatable和bootsrap创建表格实例代码
2017/03/17 Javascript
vue中添加mp3音频文件的方法
2018/03/02 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
vue组件中节流函数的失效的原因和解决方法
2020/12/02 Vue.js
Python使用MD5加密字符串示例
2014/08/22 Python
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
如何实现删除numpy.array中的行或列
2018/05/08 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
Python json模块dumps、loads操作示例
2018/09/06 Python
python实现批量nii文件转换为png图像
2019/07/18 Python
美国知名保健品网站:LuckyVitamin(支持中文)
2017/08/09 全球购物
UGG英国官方网站:UGG UK
2018/02/08 全球购物
Sneaker Studio匈牙利:购买运动鞋
2018/03/26 全球购物
关于Java String的一道面试题
2013/09/29 面试题
毕业生求职简历中的自我评价
2013/10/18 职场文书
优秀演讲稿范文
2013/12/29 职场文书
学生实习介绍信
2014/01/15 职场文书
mysql联合索引的使用规则
2021/06/23 MySQL