【注意】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. Canonical为所有支持的Ubuntu LTS系统发布了新的Linux内核更新

    Canonical近日为所有支持的Ubuntu LTS系统发布了新的Linux内核更新,以解决总共19个安全漏洞. 新的Ubuntu内核更新仅适用于长期支持的Ubuntu系统,包括Ubuntu 22. ...

  2. JavaScript验证API

    验证API 两个方法: checkValidity():如果input元素中的数据是合法的返回true,否则返回false: setCustomValidity():设置input元素的validat ...

  3. Office2021简体中文离线安装包下载地址合集，目前最全

    Office2021中文版的离线安装包下载地址合集: 一.专业增强版(强烈推荐):http://officecdn.microsoft.com/pr/492350f6-3a01-4f97-b9c0-c ...

  4. SQLServer 编程总结

    case的用途 case语句有四个关键字,缺一不可,分别是:case when then end,另外还有一个else.case 后面跟字段名(当在when后面出现字段名时,case里不能写出来),w ...

  5. windows10 远程桌面黑屏

    [计算机配置]-[管理模板]-[Windows组件]-[远程桌面服务]-[远程桌面会话主机]-[远程会话环境]-{为远程桌面连接使用WDDM图形显示驱动程序-设置禁用}

  6. video.js 注销上一个对象并重新初始化

    .dispose()没有用,不知道为什么. 后来我们为video绑定不同的id,还是随机数,每次初始化都用新video的id.并不建议这样做,但是我们也没有更好的办法了.

  7. elasticsearch 安装与配置

    一.JAVA 与 elasticsearch 的版本对应 个人实测能够对应起来的版本: elasticsearch-rtf-2.2.1 需要 JDK7 或更低的版本,推荐使用 7 elasticsea ...

  8. java学习一:java介绍及第一个helloword程序

    1.java语言介绍 java是一门后台开发语言 大型web语言系统开发,app后台服务首选开发语言 java这门语言大特点:跨平台,安全性高,有丰富的类库 核心思想:面向对象 2.Jdk介绍 3.为 ...

  9. 01爬取豆瓣网电影数据进行numpy的练习

    level 2:10.案例:编写爬虫爬取豆瓣电影排行榜(电影名称,评分),保存为csv文件 a.用numpy加载csv数据 b.把评分列转换成float64类型 c.计算电影的平均评分 d.求评分最高 ...

  10. mxArray 和 mwArray 的区别

    首先,mxArray是MatlabC 函数库的结构体,而mwArray是Matlab C++ 函数库中对mxArray的包装 类. 其次,二者的内存管理方式不同.mxArray的内存管理方式比较松散, ...