文档章节

微信小程序下拉筛选菜单WXDropDownMenu组件实现下拉动画

秀杰
 秀杰
发布于 2016/10/19 09:47
字数 466
阅读 3816
收藏 3

[2016-10-18]

官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html

图

改为动画版,需要要满足平移动画与背景遮罩。思路如下:

1.二级菜单初始隐藏且位置位于手机屏幕之外

2.当点击一级菜单时,二级菜单平移向下,直到二级菜单上边缘与一级菜单下边缘平齐。使用linear动画

3.点击自身或其他一级菜单,做逆操作

4.背景遮罩,使用ease-in/ease-out动画

步骤1 改造样式表,top值

步骤2 声明动画

核心代码:

	animation: function(index) {
		// 定义一个动画
	    var animation = wx.createAnimation({
	    	duration: 400,
	        timingFunction: 'linear',
	    })
	    // 是显示还是隐藏
	    var flag = this.data.subMenuDisplay[index] == 'show' ? 1 : -1;
	    // flag = 1;
	    console.log(flag)
	    // 使之Y轴平移
	    animation.translateY(flag * (initSubMenuHighLight[index].length * 34) + 8).step();
	    // 导出到数据,绑定给view属性
	    this.setData({
	    	animationData:animation.export()
	    });
	}

完成动画后,需调用一次step(),不论是一组还是多组都需要调。

步骤3 声明data数组并与wxml绑定

		animationData: {}

wxml中

	<dd animation="{{animationData}}">

z-index问题,会挡住一级菜单,设置为-999,可以置于一级菜单之下

使用bottom: 0;初始在一级菜单底边缘平齐。

dl 设置为position: relative; 与二级菜单 position: absolute 对应。

步骤4 点击一级菜单调用动画

		// 设置动画
		this.animation(index);

步骤5 点击二级菜单调用动画

		// 设置动画
		this.animation(indexArray[0]);

步骤6 display属性要改为visibility

/* 显示与隐藏 */
.show {
	/*display: block;*/
	visibility: visible;
}

.hidden {
	/*display: none;*/
	visibility:hidden;
}

保留占位,宽度高度,不然点击没了动画效果。

源码下载:关注下方的公众号->回复数字1006

对小程序开发有趣的朋友关注公众号: huangxiujie85,QQ群: 581513218,微信: small_application,陆续还将推出更多作品。

公众号

© 著作权归作者所有

秀杰
粉丝 153
博文 94
码字总数 50956
作品 0
瑞安
iOS工程师
私信 提问
微信小程序的自定义组件 - wux

wux 是一个微信小程序自定义组件(对话框、指示器、五星评分...) 预览 用微信web开发者工具打开目录(请注意,是dist目录,不是整个项目) 使用 组件的wxml结构请看下的组件 样式文件可直接...

匿名
2018/04/03
5.3K
4
黄秀杰/WXDropDownMenu

先来看下效果图: 思路与步骤: 布局方面,整体使用dl来写,二级包在dd中,用ul li来写;交互方面,点击某一级菜单,关闭兄弟子菜单,点击某子菜单关闭所有菜单。 1.使用dt做出第一级菜单 2....

黄秀杰
2016/10/09
0
0
微信小程序之下拉刷新,上拉更多列表实现

代码地址如下: http://www.demodashi.com/demo/11110.html 一、准备工作 首先需要下载小程序开发工具 官方下载地址: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 目...

demo大师
2018/10/05
0
0
利用WordPress rest api 迅速架构微信小程序 - WordPress 版微信小程序

WordPress 版微信小程序 内容: 1、调整列表页的显示方式。 2、增加搜索。 3、首页增加轮播图片和缩略图。 4、增加文章评论 5.增加小程序分享 升级的详细说明 日期:2017年5月15日 内容: 1、...

匿名
2017/07/10
4.6K
0
wx-jq:一套完全原创的微信小程序插件集合库

wx-jq (一套完全原创的微信小程序插件集合库) 微信小程序插件,微信小程序组件,微信小程序插件集合,微信小程序组件集合,微信小程序插件学习,微信小程序插件开发, 在线演示: 下载地址...

透笔度
2018/01/25
5.4K
4

没有更多内容

加载失败,请刷新页面

加载更多

官方来源的 Duo Mobile App 解决了我的 Network Difficulties 问题

https://help.duo.com/s/article/2094?language=en_US 我利用百度搜索下载了一个 Duo Mobile App (由于 Google Play)在大陆不可用。 在扫描旧手机上的 Duo Mobile App 的二维码时, 显示出错...

圣洁之子
12分钟前
2
0
Zabbix监控Mysql容器(Docker容器)主从是否存活

1、在Zabbix Web端创建模板 2、为该模板创建监控项 3、创建触发器 4、在zabbix-agent端操作 在/etc/zabbix/zabbix_agentd.d新建customize.confw文件 内容如下 UserParameter=mysql.replicat...

abowu
13分钟前
1
0
基于 RocketMQ 的同城双活架构在美菜网的挑战与实践

本文整理自李样兵在北京站 RocketMQ meetup分享美菜网使用 RocketMQ 过程中的一些心得和经验,偏重于实践。 嘉宾李样兵,现就职于美菜网基础服务平台组,负责 MQ ,配置中心和任务调度等基础...

大涛学长
19分钟前
2
0
设计模式之:外观模式和桥接模式

作者:DevYK 链接:https://juejin.im/post/5d7e01f4f265da03b5747aac 外观模式 介绍 外观模式 (Facade) 在开发过程中的运用评率非常高,尤其是在现阶段,各种第三方 SDK “充斥” 在我们周边...

Java架构Monster
20分钟前
1
0
人证合一核验设备

人脸身份验证机,人证合一设备1:N如我们现在在车站或一些重要的场所如步行街、城中村等人流密集的场所应用的人脸识别布控系统,其特点是动态和非配合。所谓的动态也就是识别的不是照 片,不是...

非思丸智能
22分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部