【注意】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. C#辗转相除法输出最大公约数

    void main() { int r, m, n, t; scanf_s("%d\n%d", &m, &n); if (m < n) { t = m; m ...

  2. 【狂神说】SpringMVC笔记

    1.回顾MVC ssm:mybatis+Spring+SpringMVC MVC三层架构 ssm框架:研究官方文档,锻炼自学能力,锻炼项目能力 SpringMVC+Vue+SpringBoot+Spr ...

  3. calico 关闭SNAT

    calico 关闭SNAT 默认情况下,calico 访问集群外网络是通过 SNAT 成宿主机 ip 方式,在一些金融客户环境中为了能实现防火墙规则,需要直接针对 POD ip 进行进行规则配置,所以 ...

  4. ubuntu下编译安装uWebSockets

    最近开始接触websocket,第一次装的时候,还是遇到了些问题,这里记录一下 1.从git下载uWebSockets 地址:https://github.com/uNetworking/uWebSo ...

  5. app内嵌H5踩坑

    内嵌的H5是用的vue2版本开发的,期间有很多的坑要踩: 1.调用app返回上一个页面不触发页面的onmouted和window.onPageShow app返回上一个页面调用的方法并不会出发vue的 ...

  6. MobilePBRLighting优化思路2

    在最近的研究工作中,进一步对移动端PBRLighting进行了优化,以下是一些优化截图,由于后续整理文章使用: PBRLighting(未开启伽马矫正): MobilePBRLighting(高质量版 ...

  7. 支持批量图片转文字的【OCR】文字识别工具，支持截图识别，速度快，准确度高，免费OCR，开源软件

    想必大家偶尔也有需要从图片中提取文字的需求,虽然现在手机上都自带了拍照识别功能,可是从电脑上的图片传到手机识别再将结果发回来实 在是有点麻烦,尤其当图片数量较多时,更是费时费力,使用网页版工具又要面临 ...

  8. word生成产生错误的原因

    技术背景 很多时候我们网站或者系统需要提供一些word文件,例如证明.docx或者订单.docx等文件供用户下载打印等. 用Java操作word文档,毫无疑问,当下最流行apache poi,对于po ...

  9. pdf导出 预览、直接打印、打印加预览

    前台: var xueurl = "fileFormatController.do?getXbDetail_print&id=&codes=" + rowsData ...

  10. jmeter接口之json提取器应用

    在接口测试中有一个这样的场景:业务接口需要用到登录token:下个接口需要用到前个接口返回值作为参数,该怎么实现? 首先先看下登录.业务接口,本文用的jmeter版本为5.4.1 一.json提取器设 ...