微信小程序 利用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 相关文章推荐
使用Modello编写JavaScript类
Dec 22 Javascript
javaScript面向对象继承方法经典实现
Aug 20 Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 Javascript
javascript计时器详解
Feb 28 Javascript
不得不分享的JavaScript常用方法函数集(下)
Dec 25 Javascript
JS中实现函数return多个返回值的实例
Feb 21 Javascript
使用angular帮你实现拖拽的示例
Jul 05 Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 Javascript
默认浏览器设置及vue自动打开页面的方法
Sep 21 Javascript
JS用最简单的方法实现四舍五入
Aug 27 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
JavaScript实现九宫格拖拽效果
Jun 28 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 Ajax中文乱码问题解决方法
2009/02/27 PHP
PHP IN_ARRAY 函数使用注意事项
2010/07/24 PHP
Laravel 4 初级教程之安装及入门
2014/10/30 PHP
php验证session无效的解决方法
2014/11/04 PHP
程序员的表白神器“520”大声喊出来
2016/05/20 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
thinkphp 中的volist标签在ajax操作中的特殊性(推荐)
2018/01/15 PHP
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
2011/11/18 Javascript
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
微信小程序模板之分页滑动栏
2017/02/10 Javascript
VUE开发一个图片轮播的组件示例代码
2017/03/06 Javascript
express框架实现基于Websocket建立的简易聊天室
2017/08/10 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
vue中el-upload上传图片到七牛的示例代码
2018/10/19 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
Python实现字典依据value排序
2016/02/24 Python
python 写入csv乱码问题解决方法
2016/10/23 Python
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
Python heapq使用详解及实例代码
2017/01/25 Python
Python使用socket_TCP实现小文件下载功能
2020/10/09 Python
Europcar英国:英国汽车和货车租赁
2017/01/21 全球购物
台湾森森购物网:U-mall
2017/10/16 全球购物
英国床和浴室商场:Bed & Bath Emporium
2018/05/20 全球购物
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
远程教育培训心得体会
2016/01/09 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python
解析MySQL binlog
2021/06/11 MySQL
vue postcss-px2rem 自适应布局
2022/05/15 Vue.js