微信小程序实现点击空白隐藏的方法示例


Posted in Javascript onAugust 13, 2019

怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路是用css3的transform: translateY()属性,给需要动画的元素添加上一个动画class。

先上效果图:

微信小程序实现点击空白隐藏的方法示例
1.蒙层的结构:

<!-- 购物车蒙层 -->
<view class='list-fix' wx:if="{{mengShow}}" bindtap='outbtn'>     //mengShow是蒙层是否显示的标志,然后蒙层绑定outbtn的点击事件
  <view class='in-list {{aniStyle?"slideup":"slidedown"}}' catchtap='inbtn'>
//这里的三元运算符是判断动画该执行哪一种,catchtap这个是阻止冒泡的点击事件,这个事件必须有,才能阻止冒泡
    <view class='in-content'>
      <text>已选商品(1)</text>
      <text class='iconfont icon-6'>清空购物车</text>
    </view>
    <view class='cho-list' wx:for="{{chooseList}}" wx:key="">
      <view class='listName'>{{item.Cname}}</view>
      <view class='listPrice'>¥{{item.Cprice}}</view>
      <view class='opBtn'>
        <view class='com-btn cuts' >-</view>   
        <view class='com-num'>{{item.Cnum}}</view>
        <view class='com-btn add' >+</view>   
      </view>
    </view>
  </view>
</view>

注意:三元运算符里的slideup和slidedown一定要加上引号

2.蒙层的其它样式自己写。最主要的是slideup和slidedown的动画效果的样式:

@keyframes slidedown {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}
.slidedown {
  animation: slidedown 0.5s linear ;
}
.slideup {
  animation: slideup 0.5s linear ;
}
@keyframes slideup {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

其它的样式:list-fix是fixed定位,而in-list是absolute定位。

需要注意的一点是:做的时候,是从Y轴100%的位置处即最底部开始运动或是从0到100%,所以要设置z-index,才能实现在底部运动起来的时候或者回到100%即底部的时候,蒙层浮在“确认下单”这整个结构的下面。即“确认下单”这整个结构的z-index要大于蒙层的z-index。

3.js

page({
  data: {
    mengShow:false,//蒙层的显示与否
   aniStyle:true,  //动画效果,默认slideup     
  },
  //蒙层的显示
  showMeng:function(e){     //这是“确认下单”这整个购物车导航栏的点击事件
    this.setData({
      mengShow:true,      //蒙层显示
      aniStyle:true



//设置动画效果为slideup
    })
  },
  outbtn:function(e){      //这是list-fix的点击事件,给它绑定事件,是为了实现点击其它地方隐藏蒙层的效果
    var that=this;
    this.setData({




      aniStyle:false


//设置动画效果为slidedown
    })
    setTimeout(function(){    //延时设置蒙层的隐藏,这个定时器的时间,就是slidedown在css动画里设置的时间,这样就能实现slidedown动画完成后,蒙层才消失的效果。不设置定时器会导致动画效果看不见
      that.setData({
        mengShow: false
      })
    },500)
  },
  inbtn:function(e){     //这个事件必须有,就算不做什么事情也要写上去,因为这个事件是为了防止事件冒泡,导致点击in-list这里面的元素时,点击事件冒泡到list-fix触发它的slidedown事件。
    console.log("in")
  }, 
})

这样就能实现slidedown和slideup,点击其它地方隐藏某元素的功能了。

总结:

1.防止冒泡的点击事件:catchtap=“”

2.点击父元素除子元素以外的其它地方隐藏父元素的方法:父元素绑定一个点击隐藏事件,然后子元素绑定catchtap这种能阻止冒泡的事件

3.巧用定时器设置属性值,可达到类似上面执行一个动画之后再执行另外一个动画的方法。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ExtJS扩展 垂直tabLayout实现代码
Jun 21 Javascript
基于JavaScript 下namespace 功能的简单分析
Jul 05 Javascript
JS替换字符串中字符即替换全部而不是第一个
Jun 04 Javascript
javascript中键盘事件用法实例分析
Jan 30 Javascript
Angular2数据绑定详解
Apr 18 Javascript
Vue-router 类似Vuex实现组件化开发的示例
Sep 15 Javascript
vuejs使用递归组件实现树形目录的方法
Sep 30 Javascript
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
js序列化和反序列化的使用讲解
Jan 19 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
May 30 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 Javascript
vue项目中定义全局变量、函数的几种方法
Nov 08 Javascript
微信小程序使用npm包的方法步骤
Aug 13 #Javascript
Vue中的transition封装组件的实现方法
Aug 13 #Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 #Javascript
详解json串反转义(消除反斜杠)
Aug 12 #Javascript
json 带斜杠时如何解析的实现
Aug 12 #Javascript
electron实现静默打印的示例代码
Aug 12 #Javascript
微信小程序 弹窗输入组件的实现解析
Aug 12 #Javascript
You might like
PHP.MVC的模板标签系统(四)
2006/09/05 PHP
php调用方法mssql_fetch_row、mssql_fetch_array、mssql_fetch_assoc和mssql_fetch_objcect读取数据的区别
2012/08/08 PHP
CI框架学习笔记(一) - 环境安装、基本术语和框架流程
2014/10/26 PHP
Yii中实现处理前后台登录的新方法
2015/12/28 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
PHP微信发送推送消息乱码的解决方法
2019/02/28 PHP
JavaScript版代码高亮
2006/06/26 Javascript
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
2009/04/10 Javascript
JavaScript 嵌套函数指向this对象错误的解决方法
2010/03/15 Javascript
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
2016/11/10 Javascript
解决html input验证只能输入数字,不能输入其他的问题
2017/07/21 Javascript
nodejs socket服务端和客户端简单通信功能
2017/09/14 NodeJs
浅谈Node.js 子进程与应用场景
2018/01/24 Javascript
webpack+react+antd脚手架优化的方法
2018/04/02 Javascript
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
Python中的数据对象持久化存储模块pickle的使用示例
2016/03/03 Python
用Python写一个无界面的2048小游戏
2016/05/24 Python
Flask框架信号用法实例分析
2018/07/24 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
使用python3构建文件传输的方法
2019/02/13 Python
python3使用matplotlib绘制条形图
2020/03/25 Python
python 字段拆分详解
2019/12/17 Python
基于python检查矩阵计算结果
2020/05/21 Python
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
2020/05/22 Python
CSS3条纹背景制作的实战攻略
2016/05/31 HTML / CSS
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
钳工实习自我鉴定
2013/09/19 职场文书
保管员岗位职责
2015/02/14 职场文书
地道战观后感2000字
2015/06/04 职场文书
python运算符之与用户交互
2022/04/13 Python