小程序点击按钮出现和隐藏遮罩层

最近在实现一个小功能,点击按钮的时候,会从右侧滑动弹出一个信息层,与此同时,信息层会和遮罩层一起出现,于是小程序的动画功能和小程序点击按钮出现和隐藏遮罩层分开写成了demo了。

这篇主要是实现点击按钮出现和隐藏遮罩层,在很多实际应用之中也会经常用到的。主要就是一个float浮层。

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 #b7b8b5;
  width: 200rpx;
  text-align: center;
  line-height: 60rpx;
  height: 60rpx;
  font-size: 30rpx;
  border-radius: 30rpx;
  margin-top: 20rpx;
}

.isRuleShow {
  display: block;
}

.isRuleHide {
  display: none;
}

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

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

.ruleHide {
  height: 60rpx !important;
  width: 60rpx !important;
  position: absolute;
  top: -9rpx;
  right: -9rpx;
}

js

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

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

效果是这样的,界面css没有细细的写,所以比较简陋,配合着看吧,主要就是这样的一功能


5640239-e84a076c4f0ccf39.gif

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1
90后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,对于博客上面有不会的问题,可以加入qq群聊来问我:473819131。

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值