微信小程序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针对DOM的应用分析(二)
Apr 15 Javascript
JS关键字变色实现思路及代码
Feb 21 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
Sep 03 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
Apr 18 Javascript
jQuery中index()方法用法实例
Dec 27 Javascript
Angular2  NgModule 模块详解
Oct 19 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 Javascript
使用preload预加载页面资源时注意事项
Feb 03 Javascript
前端深入理解Typescript泛型概念
Mar 09 Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 Javascript
vue实现移动端返回顶部
Oct 12 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
我的论坛源代码(二)
2006/10/09 PHP
php 分页函数multi() discuz
2009/06/21 PHP
PHP常用的缓存技术汇总
2014/05/05 PHP
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
php获取网页上所有链接的方法
2015/04/03 PHP
php base64 编码与解码实例代码
2017/03/21 PHP
php给数组赋值的实例方法
2019/09/26 PHP
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
js 颜色选择器(兼容firefox)
2009/03/05 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
2011/03/07 Javascript
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
vue实现表格数据的增删改查
2017/07/10 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
[03:03]DOTA2校园争霸赛 济南城市决赛欢乐发奖活动
2013/10/21 DOTA
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
Python学习笔记之open()函数打开文件路径报错问题
2018/04/28 Python
详谈Python 窗体(tkinter)表格数据(Treeview)
2018/10/11 Python
Django保护敏感信息的方法示例
2019/05/09 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
在python中logger setlevel没有生效的解决
2020/02/21 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
入党自我评价范文
2014/02/02 职场文书
幼儿园标语大全
2014/06/19 职场文书
会计学习心得体会
2014/09/09 职场文书
商务司机岗位职责
2015/04/10 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
民事上诉状范文
2015/05/22 职场文书
小学生禁毒教育心得体会
2016/01/15 职场文书
话题作文之学会尊重
2019/12/16 职场文书
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技