微信小程序实现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 相关文章推荐
JS event使用方法详解
Apr 28 Javascript
jQuery图片播放8款精美插件分享
Feb 17 Javascript
基于jQuery实现下拉框
Nov 24 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
Mar 30 Javascript
老生常谈angularjs中的$state.go
Apr 24 Javascript
H5实现仿flash效果的实现代码
Sep 29 Javascript
利用nvm管理多个版本的node.js与npm详解
Nov 02 Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
vue基础之v-bind属性、class和style用法分析
Mar 11 Javascript
微信小程序调用微信支付接口的实现方法
Apr 29 Javascript
layui的数据表格+springmvc实现搜索功能的例子
Sep 28 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根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
php实现用于删除整个目录的递归函数
2015/03/16 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
微信支付开发发货通知实例
2016/07/12 PHP
简单谈谈PHP面向对象之标识对象
2017/06/27 PHP
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
js indexOf()定义和用法
2012/10/21 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
2013/05/30 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
2015/06/23 Javascript
javascript常用的方法分享
2015/07/01 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
浅析JavaScript中作用域和作用域链
2016/12/06 Javascript
12 款 JS 代码测试必备工具(翻译)
2016/12/13 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
vue.js指令v-for使用以及下标索引的获取
2019/01/31 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
2019/09/05 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
python中的格式化输出用法总结
2016/07/28 Python
Python正则表达式经典入门教程
2017/05/22 Python
在Python中COM口的调用方法
2019/07/03 Python
Python图像处理PIL各模块详细介绍(推荐)
2019/07/17 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
idea2020手动安装python插件的实现方法
2020/07/17 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
销售经理工作职责
2014/02/03 职场文书
军训 自我鉴定
2014/02/03 职场文书
学校安全责任书范本
2014/07/23 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
村干部四风问题整改措施
2014/09/30 职场文书
2019年教师节活动策划方案
2019/09/09 职场文书
《王国之心》迎来了发售的20周年, 野村哲发布贺图
2022/04/11 其他游戏