微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
时间:2018-12-11
这篇文章主要介绍了微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能,涉及微信小程序事件响应、页面元素属性动态操作实现滑动与蒙层功能相关技巧与注意事项,需要的朋友可以参考下
本文实例讲述了微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能。分享给大家供大家参考,具体如下:
怎样实现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 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 浙大版《C语言程序设计(第3版)》题目集 习题7-3 判断上三角矩阵
- 浙大版《C语言程序设计(第3版)》题目集 习题7-4 求矩阵各行元素之和
- 浙大版《C语言程序设计(第3版)》题目集 习题7-6 统计大写辅音字母
- 浙大版《C语言程序设计(第3版)》题目集 习题7-7 字符串替换
- 浙大版《C语言程序设计(第3版)》题目集 习题8-10 输出学生成绩
- 浙大版《C语言程序设计(第3版)》题目集 习题9-1 时间换算
- 浙大版《C语言程序设计(第3版)》题目集 习题9-3 平面向量加法
- 浙大版《C语言程序设计(第3版)》题目集 习题9-4 查找书籍
- 浙大版《C语言程序设计(第3版)》题目集 习题9-5 通讯录排序
- 浙大版《C语言程序设计(第3版)》题目集 习题7-5 找鞍点
- 浙大版《C语言程序设计(第3版)》题目集 练习5-1 求m到n之和
- 手把手教你用Python爬取快递100查询你的物流信息
- 浙大版《C语言程序设计(第3版)》题目集 练习5-2 找两个数中最大者
- 浙大版《C语言程序设计(第3版)》题目集 练习5-3 数字金字塔
- 浙大版《C语言程序设计(第3版)》题目集 习题5-1 符号函数