小程序点击按钮出现和隐藏遮罩层
时间:2022-06-16
本文章向大家介绍小程序点击按钮出现和隐藏遮罩层,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
最近在实现一个小功能,点击按钮的时候,会从右侧滑动弹出一个信息层,与此同时,信息层会和遮罩层一起出现,于是小程序的动画功能和小程序点击按钮出现和隐藏遮罩层分开写成了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没有细细的写,所以比较简陋,配合着看吧,主要就是这样的一功能
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Nginx系列:负载均衡
- low版爬虫脚本,Python简单图片爬虫案例
- 漫画:什么是计数排序?
- SEO工具脚本,Python百度普通收录API提交工具
- Elastic Stack 实现日志的自动采集、搜索和分析
- 致开发人员:沉迷面向对象编程不可自拔?函数式编程了解一下
- MySQL空间函数实现位置打卡
- 单细胞交响乐8-marker基因检测
- 用TensorFlow.js在浏览器中进行实时语义分割 | MixLab算法系列
- python实现高性能mock服务
- 数据可视、语义分割、T_Youtube、智能调酒 | Mixlab人工智能合集
- Appium自动化测试框架探索与实践
- 交叉验证和超参数调整:如何优化你的机器学习模型
- 编写Docker Compose时要注意的五大常见错误
- 详解DBSCAN聚类