美文网首页
屏幕遮掩层:微信小程序

屏幕遮掩层:微信小程序

作者: 国王兔子 | 来源:发表于2019-04-17 19:59 被阅读0次

微信弹出和隐藏遮罩层动画是小程序开发中非常重要的技能

  • 关闭按钮图片


    del.png
  • js

Page({
  data: {},
  onLoad: function () {

  },
  //打开透明层
  showRule: function () {
    this.setData({
      isRuleTrue: true
    })
  },
  //关闭透明层
  hideRule: function () {
    this.setData({
      isRuleTrue: false
    })
  },
})

  • wxml
<text class='up' bindtap='showRule'>签到</text>
<view class="float {{isRuleTrue?'isRuleShow':'isRuleHide'}}">
  <view class='floatContent'>
    签到成功!
    <image src='../../images/del.png' class='ruleHide' bindtap='hideRule'>X</image>
  </view>
</view>
  • wxss
.up {
  display: block;
  border: 1px solid #148631;
  width: 100%;
  align-items: center;
  text-align: center;
  line-height: 60rpx;
  height: 80rpx;
  font-size: 30rpx;
  border-radius: 30rpx;
  margin-top: 20rpx;
  background:#00b26a;
}

.isRuleShow {
  display: block;
}

.isRuleHide {
  display: none;
}

.float {
  height: 100%;
  width: 100%;
  position: fixed;
  background-color: rgba(143, 126, 100, 0.521);
  z-index: 2;
  top: 0;
  left: 0;
}

.floatContent {
  padding: 20rpx 0;
  width: 90%;
  height: 500rpx;
  background:#b7b8b5 ;
  margin: 40% auto;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: relative;
}

.ruleHide {
  height: 30rpx !important;
  width: 30rpx !important;
  position: absolute;
  top: 40rpx;
  right: 40rpx;
}
  • 效果图


    image.png
    image.png

相关文章

  • 屏幕遮掩层:微信小程序

    微信弹出和隐藏遮罩层动画是小程序开发中非常重要的技能 关闭按钮图片del.png js wxml wxss 效果图...

  • 微信小程序基础

    微信小程序介绍微信小程序开发工具的使用微信小程序框架文件微信小程序逻辑层微信小程序视图层微信小程序组件介绍微信小程...

  • 初识小程序-逻辑层

    逻辑层 逻辑层,是事务逻辑处理的地方。对于微信小程序而言,逻辑层就是所有.js脚本文件的集合。微信小程序在逻辑层将...

  • 微信小程序尺寸单位rpx以及样式相关介绍

    微信小程序尺寸单位 rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750...

  • 如何实现微信小程序的横屏及适配

    微信小程序如何横屏 从小程序基础库版本 2.4.0 开始,小程序在手机上支持屏幕旋转。使小程序中的页面支持屏幕旋转...

  • rpx

    rpx:微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。也就是说,无论是在iPho...

  • 小程序中的rpx

    rpx:微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。也就是说,无论是在iPho...

  • 使用 quickjs 和 Vue.js 模仿微信小程序的双线程模

    微信小程序和网页最大的不同是小程序基于 WebView + JS引擎实现的双线程渲染架构,参考微信小程序的 渲染层...

  • 小程序生命周期函数

    微信小程序的逻辑层主要包括:小程序的初始化过程和页面的初始化过程。微信小程序使用了App和Page方法进行了程序和...

  • 微信小程序开发学习总结(二) WXML

    一.WXML。 对于微信小程序而言,视图层就是所有.wxml文件与.wxss文件的集合。微信小程序在逻辑层将数据进...

网友评论

      本文标题:屏幕遮掩层:微信小程序

      本文链接:https://www.haomeiwen.com/subject/wzdowqtx.html