微信小程序实现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翻页效果
Jul 23 Javascript
js对象数组按属性快速排序
Jan 31 Javascript
表头固定(利用jquery实现原理介绍)
Nov 08 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
Mar 11 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
Mar 16 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
JavaScript实现url参数转成json形式
Sep 25 Javascript
写给vue新手们的vue渲染页面教程
Sep 01 Javascript
echarts大屏字体自适应的方法步骤
Jul 12 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 Javascript
原生js实现二级联动菜单
Nov 27 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笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
二进制交叉权限微型php类分享
2014/02/07 PHP
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
基于jquery实现一张图片点击鼠标放大再点缩小
2013/09/29 Javascript
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
jQuery实现当前页面标签高亮显示的方法
2015/03/10 Javascript
js获取本机操作系统类型的两种方法
2015/12/19 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
js实现Tab选项卡切换效果
2020/07/17 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
2017/11/28 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
angular6的响应式表单的实现
2018/10/10 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
解决layui table表单提示数据接口请求异常的问题
2019/09/24 Javascript
vue+elementui 对话框取消 表单验证重置示例
2019/10/29 Javascript
用Python设计一个经典小游戏
2017/05/15 Python
Python反射的用法实例分析
2018/02/11 Python
python批量爬取下载抖音视频
2019/06/17 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
Python urllib.request对象案例解析
2020/05/11 Python
这段代码难道不该打印出56吗
2013/02/27 面试题
师范应届生教师求职信
2013/11/05 职场文书
工程建设实施方案
2014/03/14 职场文书
文明寝室申报材料
2014/05/12 职场文书
单位委托书怎么写
2014/09/21 职场文书
教师节校长致辞
2015/07/31 职场文书
SQL Server中交叉联接的用法详解
2021/04/22 SQL Server
《乙女游戏世界对路人角色很不友好》OP主题曲无字幕动画MV公开
2022/04/05 日漫
使用scrapy实现增量式爬取方式
2022/06/21 Python