【注意】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动态标签——sql标签

    mapper接口 Emp getEmpById(@Param("id") Integer id); mapper.xml <!-- sql片段:可以记录一段sql,在需要用的 ...

  2. 「JOI Open 2022」Giraffes 题解

    设我们将要给出的观感好的排列为 \(q\),我们希望求出 \(\sum[p_i=q_i]\) 的最大值(这里指不移动的长颈鹿个数). 结论一:当且仅当左右端点有当前区间最大值或者最小值时条件才能成立. ...

  3. nodejs 后台运行 forever

    一.安装nodejs //安装必要的make以及gcc,gcc-c++编译器 yum -y install make gcc gcc-c++ //获取源码 wget http://nodejs.org ...

  4. css3的的新特性

    1.transform 2.calc 3.transition

  5. iview、render使用方法

    1.<Table size="large" :columns="columns7" :data="labelInput.label" ...

  6. Java运算符（复习）

    运算符 运算符:对字面量或者变量进行操作的符号 表达式:用运算符把字面量或者变量连接起来,符合Java语法的式子就可以称为表达式. 算数运算符 符号 作用 + 加法作用 - 减法作用 * 乘法作用 / ...

  7. Angular 依赖注入的错误 NullInjectorError, No provider for XXX

    一.在module的providers区域里,为pipe维护具体的实现类 二.如果不想改动module.ts,可选择直接在组件中注入

  8. Linux 关闭系统时间同步－timedatectl的使用

    源于一次项目需要修改系统时间,但是每次修改后又被同步回网络时间,找了好久发现是这个原因: NTP即Network Time Protocol(网络时间协议),是一个互联网协议,用于同步计算机之间的系统 ...

  9. java-javaSE-异常机制

    java中的异常结构 java 中的所有异常都来自于顶级父类 Throwable,Throwable 有两个子类 Exception 和 Error Error 是 Java 虚拟机无法解决的严重问题 ...

  10. Java笔记_方法重载

    /** * @ClassName OverLoadExercise * @Description TODO * @Author Orange * @Date 2021/4/19 8:29 * @Ver ...