微信小程序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 相关文章推荐
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
jQuery库与其他JS库冲突的解决办法
Feb 07 Javascript
html+css+js实现xp window界面及有关功能
Mar 26 Javascript
关于eval 与new Function 到底该选哪个?
Apr 17 Javascript
原生js做的手风琴效果的导航菜单
Nov 08 Javascript
浅谈Javascript中深复制
Dec 01 Javascript
关于Javascript中defer和async的区别总结
Sep 20 Javascript
Javascript动画效果(2)
Oct 11 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
Feb 05 Javascript
Vue开发中整合axios的文件整理
Apr 29 Javascript
Bootstrap输入框组件使用详解
Jun 09 Javascript
JavaScript常见鼠标事件与用法分析
Jan 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实现获取文章内容第一张图片的方法
2014/11/04 PHP
使用Huagepage和PGO来提升PHP7的执行性能
2015/11/30 PHP
Zend Framework教程之Loader以及PluginLoader用法详解
2016/03/09 PHP
PHP实现的回溯算法示例
2017/08/15 PHP
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
jquery mobile changepage的三种传参方法介绍
2013/09/13 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
JavaScript Math.round() 方法
2015/12/18 Javascript
angularjs表格分页功能详解
2016/01/21 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
Javascript实现代码折叠功能
2016/08/25 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
Vue表单实例代码
2016/09/05 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
2017/01/12 Javascript
vue.js指令v-model使用方法
2017/03/20 Javascript
Bootstrap Table使用整理(一)
2017/06/09 Javascript
javascript 产生随机数的几种方法总结
2017/09/26 Javascript
浅谈Webpack自动化构建实践指南
2017/12/18 Javascript
详解Vue中watch的详细用法
2018/11/28 Javascript
详解JS实现系统登录页的登录和验证
2019/04/29 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
Python入门篇之字典
2014/10/17 Python
对Python新手编程过程中如何规避一些常见问题的建议
2015/04/01 Python
python使用PyCharm进行远程开发和调试
2017/11/02 Python
Python虚拟环境项目实例
2017/11/20 Python
python监控键盘输入实例代码
2018/02/09 Python
深入理解Python爬虫代理池服务
2018/02/28 Python
Python OpenCV图像指定区域裁剪的实现
2019/10/30 Python
python 通过文件夹导入包的操作
2020/06/01 Python
通过实例解析Python RPC实现原理及方法
2020/07/07 Python
大四自我鉴定范文
2013/10/06 职场文书
家长给幼儿园的表扬信
2014/01/09 职场文书
工地宣传标语
2014/06/18 职场文书
离婚协议书范本样本
2014/08/19 职场文书
mysql的Buffer Pool存储及原理
2022/04/02 MySQL