微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例


Posted in Javascript onDecember 11, 2018

本文实例讲述了微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能。分享给大家供大家参考,具体如下:

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

先上效果图:

微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例

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 form 验证函数 弹出对话框形式
Jun 23 Javascript
jQuery插件实现无缝滚动特效
Nov 24 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
Aug 15 Javascript
JS实现简单的二元方程计算器功能示例
Jan 03 Javascript
微信小程序 地图map详解及简单实例
Jan 10 Javascript
JavaScript设计模式之代理模式详解
Jun 09 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
Vue-cli@3.0 插件系统简析
Sep 05 Javascript
微信小程序实现卡片层叠滑动效果
Jun 21 Javascript
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
Apr 08 Javascript
微信小程序实现watch监听
Jun 04 Javascript
微信小程序实现两个页面传值的方法分析
Dec 11 #Javascript
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 #jQuery
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 #Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
Dec 11 #Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 #Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
Dec 11 #Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 #jQuery
You might like
php session 预定义数组
2009/03/16 PHP
基于php下载文件的详解
2013/06/02 PHP
PHP实现使用优酷土豆视频地址获取swf播放器分享地址
2014/06/05 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
php数组键名技巧小结
2015/02/17 PHP
PHP获取指定日期是星期几的实现方法
2016/11/30 PHP
Thinkphp整合阿里云OSS图片上传实例代码
2019/04/28 PHP
Laravel Eloquent ORM 多条件查询的例子
2019/10/10 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
菜单效果
2006/10/14 Javascript
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
js 动态修改css文件的方法
2014/08/05 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
javascript this详细介绍
2016/09/19 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
angular4模块中给标签添加背景图的实现方法
2017/09/15 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
vue-cli + sass 的正确打开方式图文详解
2017/10/27 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
vue-router的钩子函数用法实例分析
2019/10/26 Javascript
python处理cookie详解
2014/02/07 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
Python列表操作方法详解
2020/02/09 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
如果NULL和0作为空指针常数是等价的,那我到底该用哪一个
2014/09/16 面试题
园林设计师自荐信
2013/11/18 职场文书
大学生村官工作感言
2014/01/10 职场文书
初三学生个人自我评定
2014/04/06 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android