【注意】css放的位置可能影响效果

参考a-level

competitionFilterCover

1.容器：position: absolute;

top: 100vh;

animation: moveon 0.5s forwards;

2.添加属性：hideAnimate

3.

class="root {{hideAnimate ? 'rootHide' : ''}}"

class="whiteContent {{hideAnimate ? 'contentHide' :''}}"

4.

hideSelf(){

this.setData({

hideAnimate: true

})

setTimeout(() => {

this.setData({

show: false

})

}, 400);

},

小程序modal弹窗的更多相关文章

  1. 支付宝小程序自定义弹窗插件|支付宝dialog插件|model插件

    支付宝小程序自定义弹窗组件wcPop|小程序自定义对话框|actionSheet弹窗模板 支付宝小程序官方提供的alert提示框.dialog对话框.model弹窗功能比较有限,有些都不能随意自定义修 ...

  2. 关于微信小程序 modal弹框组件的介绍

    微信小程序 modal: 这里对微信小程序中 modal组件进行详细解析,我想开发微信小程序的小伙伴可以用到,这里小编就记录下modal的知识要点. modal modal类似于javascript中 ...

  3. 微信小程序自定义弹窗wcPop插件|仿微信弹窗样式

    微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的 ...

  4. 微信小程序 - 自定义弹窗组件

    2019-01-06:简化了一些代码,以及增加了可用性. // 弹窗配置 dialogConfig: { // 弹窗 dialogvisible: false, options: { // 显示关闭按 ...

  5. 微信小程序底部弹窗动画

    第一步,在组件里编写弹窗的代码 <!-- 活动类型弹框 --> <view class='bottomModel' wx:if="{{modelFlag}}" c ...

  6. 微信小程序自定义弹窗（可通用）

    效果图 .wxml <cover-view class='mask' wx:if='{{isShow}}'> <cover-view class='modal'> <co ...

  7. Taro -- 微信小程序密码弹窗

    记录一个类似支付密码的弹窗写法,实现是否免密功能.如图: index.js   import Taro, { Component } from '@tarojs/taro'   import { Vi ...

  8. 小程序modal解决

    data{ shareDialog:false, } <cover-view wx:if="{{shareDialog}}" class="list_tab&quo ...

  9. 百度智能小程序弹窗组件wcPop|智能小程序自定义model弹窗模板

    百度智能小程序自定义弹窗组件wcPop|百度小程序model对话框|智能小程序弹窗界面模板 最近百度也推出了自己的智能小程序,如是就赶紧去试了下,官方提供的api还不是狠完整.而且官方提供的弹窗组件也 ...

  10. 小程序自定义modal弹窗封装实现

    前言小程序官方提供了 wx.showModal 方法,但样式比较固定,不能满足多元化需求,自定义势在必行~ 老规矩先上图 点击某个按钮,弹出 modal框,里面的内容可以自定义,可以是简单的文字提示, ...

随机推荐

  1. Mybatis plus 查询

    1.子查询 // 管理主管查询 Integer manageSupervisor = query.getManageSupervisor(); if (manageSupervisor != null ...

  2. 银河麒麟服务器V10-SP2安装tomcat

    1.首先先去tomcat官网下载一个安装包 2.创建一个存放压缩包的文件夹,并考入文件 3.解压tomcat压缩包 命令: tar -xvf 压缩包名 4.启动tomcat 进入apache-tomc ...

  3. sql（上）例题

    一.数据库概述 数据库(DataBase,DB):指长期保存在计算机的存储设备上,按照一定规则组织起来,可以被各种用户或应用共享的数据集合. 数据库管理系统(DataBase Management S ...

  4. 【C学习笔记】day3-3 编写程序数一下 1到 100 的所有整数中出现多少个数字9

    #include <stdio.h> int main() { int cou=0; for (int i = 1; i <= 100; i++) { if (i % 10 == 9 ...

  5. error Unnecessary return statement no-useless-return

    语法错误 原本是 addUser() {       this.$refs.addFormRef.validate((valid) => {         if (!valid) return ...

  6. CVE-2013-2566 SSL/TLS RC4 信息泄露漏洞 修复方案

    详细描述 安全套接层(Secure Sockets Layer,SSL),一种安全协议,是网景公司(Netscape)在推出Web浏览器首版的同时提出的,目的是为网络通信提供安全及数据完整性.SSL在 ...

  7. Django 之RestFramework

    1. 从request先说起 在Django原生的request里,请求的数据可以从request.GET或者request.POST里面取到. 需要注意的是,如果是POST请求,request.PO ...

  8. 8.class 类

    一.基础语法 class 类名 { } 二.类的属性 基础语法: class 类名 { 属性名: 数据类型 = 属性值; contructor(形参名: 数据类型) { this.属性名 = 属性值; ...

  9. 备份docker mysql数据库

    1.查看容器 docker ps 2.进入容器 docker exec -it 容器id /bin/bash 3.备份数据 mysqldump 数据库名称 -uroot -p >/root/** ...

  10. BLOG-2

    前言 这几次的PTA作业和考试涉及到的知识点有面向对象中对数据的封装,还有继承和多态,还有抽象类和对象容器 也涉及到了一些,同时还有关于正则表达式的一些内容.而关于题量,这应该对于一个初学者来说是一个 ...