【注意】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. ol序号并在序号加背景色

    <style type="text/css"> .list {list-style-type: none;margin: 0;padding: 0 0 0 30px;} ...

  2. CentOS7.6 添加系统自启脚本

    一.编辑脚本 1.在自定义的脚本中添加 # chkconfig: 235 20 80 # chkconfig: 2345 20 80 其中2345是默认启动级别,全部0-6共有7个级别. 0表示:表示 ...

  3. [NPUCTF2020]认清形势,建立信心

    [NPUCTF2020]认清形势,建立信心 题目 from Crypto.Util.number import * from gmpy2 import * from secret import fla ...

  4. Mysql数据库基础第四章DDL(数据定义语言):库表的管理、数据类型与约束条件

    Mysql数据库基础系列 软件下载地址 提取码:7v7u 数据下载地址 提取码:e6p9 mysql数据库基础第一章:(一)数据库基本概念 mysql数据库基础第一章:(二)mysql环境搭建 mys ...

  5. vue框架回顾

  6. web上传插件Uploadify

    Uploadify简单说来,是基于Jquery的一款文件上传插件.它的功能特色总结如下: 支持单文件或多文件上传,可控制并发上传的文件数 在服务器端支持各种语言与之配合使用,诸如PHP,.NET,Ja ...

  7. chrome调试秘籍,让你的开发速度飞起来

    前言 熟练使用调试工具,势必能大幅提高我们的开发效率,达到事半功倍的效果.废话不多说,直接进入主题. Filter过滤 过滤器最简单的用法当然是直接输入过滤的字符,但这远远不够.除了直接输入,我们还希 ...

  8. sping入门介绍-bean标签的属性

    bean标签的属性 1 .基础属性 <bean id="userDao" class="com.itheima.dao.impl.UserDaoImpl" ...

  9. 分析网络工具 Wireshark与tcpdump

    一.安装使用 1. 安装 2. 选择网卡:我们的主机就是通过其中一块网卡和其他主机进行数据交互: 3. 点击开始:打开wireshark,点击左上角那个蓝色的鲨鱼鳍按钮,开始捕获新的分组并清空之前的分 ...

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

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