微信小程序CSS3动画下拉菜单效果


Posted in Javascript onNovember 04, 2018

微信小程序没有自带的下拉菜单组件,因此我们需要自己需要写一个

思路

利用列表来存储菜单项,在外面套一个view元素作为外框,将其设置为overflow:hidden,使用CSS3动画逐渐改变外层view元素的高度,当高度为0时,里面嵌套的列表元素被完全隐藏,相当于菜单关闭。而当view元素的高度大于列表元素的高度时,相当于菜单显示。

效果图

微信小程序CSS3动画下拉菜单效果

wxml

button按钮用于触发菜单的打开和关闭,first_click参数使用户第一次点击按钮之前菜单不可见,state参数用于控制菜单的打开和关闭状态

<view id="text_box">
   <text decode='true'> 历 史 记 录</text>
</view>
<button id="slide" bindtap="toggle">?</button>
<view id="box" class="{{first_click?'show':'hide'}} {{state?'open':'close'}}">
   <view id="item_list">
      <view>111</view>
      <view>222</view>
      <view>333</view>
   </view>
</view>

css

使用@keyframes动画实现菜单的渐变打开和关闭动画

#box{
 width: 100%;
 border-top: 1px solid #ddd;
 overflow: hidden;
 height: 0;
 animation-fill-mode: forwards;
}

#item_list{
  background-color: white;
  width: 100%;
}

#item_list view{
  text-align: right;
  overflow: auto;
  white-space: nowrap;
}

@keyframes slidedown{
  from {
    height: 0;
  }
  to {
    height: 240rpx;
  }
}

@keyframes slideup{
  from {
    height: 240rpx;
  }
  to {
    height: 0;
  }
}

.open{
  animation: slidedown 1s;
}

.close{
  animation: slideup 1s; 
}

.hide{
  display: none;
}

.show{
  display: block;
}

js

页面加载完成时,菜单初始状态为隐藏和关闭,用户一旦点击按钮,菜单就显示,并逐渐打开

data: {
  state:false,
  first_click:false,
 },

 toggle: function(){
   var list_state = this.data.state,
     first_state = this.data.first_click;
   if (!first_state){
     this.setData({
      first_click: true
     });
   }
   if (list_state){
     this.setData({
      state: false
     });
   }else{
     this.setData({
      state: true
     });
   }
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
js中事件的处理与浏览器对象示例介绍
Nov 29 Javascript
JavaScript事件委托技术实例分析
Feb 06 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 Javascript
全面解析Bootstrap中form、navbar的使用方法
May 30 Javascript
如何处理JSON中的特殊字符
Nov 30 Javascript
javascript 闭包详解及简单实例应用
Dec 31 Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 Javascript
微信小程序中如何使用flyio封装网络请求
Jul 03 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
Nov 04 #Javascript
浅谈React碰到v-if
Nov 04 #Javascript
微信小程序实现顶部下拉菜单栏
Nov 04 #Javascript
微信小程序使用template标签实现五星评分功能
Nov 03 #Javascript
基于Vue-cli快速搭建项目的完整步骤
Nov 03 #Javascript
微信小程序实现笑脸评分功能
Nov 03 #Javascript
小程序实现五星点评效果
Nov 03 #Javascript
You might like
PHP 递归效率分析
2009/11/24 PHP
分享一个PHP数据流应用的简单例子
2012/06/01 PHP
解析MySql与Java的时间类型
2013/06/22 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
php使用filter_var函数判断邮箱,url,ip格式示例
2019/07/06 PHP
基于Laravel 5.2 regex验证的正确写法
2019/09/29 PHP
判断对象是否Window的实现代码
2012/01/10 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
2016/05/24 Javascript
AngularJs Understanding the Controller Component
2016/09/02 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
2019/04/28 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
nodejs+koa2 实现模仿springMVC框架
2020/10/21 NodeJs
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
Python中的sort()方法使用基础教程
2017/01/08 Python
Python 基础教程之闭包的使用方法
2017/09/29 Python
python实现员工管理系统
2018/01/11 Python
用Python逐行分析文件方法
2019/01/28 Python
Python正则表达式匹配数字和小数的方法
2019/07/03 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
python list转置和前后反转的例子
2019/08/26 Python
Python读取实时数据流示例
2019/12/02 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
使用OpenCV获取图像某点的颜色值,并设置某点的颜色
2020/06/02 Python
Python gevent协程切换实现详解
2020/09/14 Python
python读取图片颜色值并生成excel像素画的方法实例
2021/02/19 Python
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
八年级物理教学反思
2014/01/19 职场文书
大型营销活动计划书
2014/04/28 职场文书
物业总经理助理岗位职责
2014/06/29 职场文书
银行招聘自荐信
2015/03/06 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书