微信小程序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事件串连执行多个处理过程的方法
Mar 09 Javascript
javascript判断iphone/android手机横竖屏模式的函数
Dec 20 Javascript
jQuery取id有.的值的方法
May 21 Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 Javascript
javascript中判断json的方法总结
Aug 27 Javascript
玩转JavaScript OOP - 类的实现详解
Jun 08 Javascript
JS设置手机验证码60s等待实现代码
Jun 14 Javascript
Node.js学习之查询字符串解析querystring详解
Sep 28 Javascript
JS交互点击WKWebView中的图片实现预览效果
Jan 05 Javascript
JS中实现一个下载进度条及播放进度条的代码
Jun 10 Javascript
解决vue自定义组件@click点击失效问题
Apr 30 Vue.js
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
Array of country list in PHP with Zend Framework
2011/10/17 PHP
PHP中time(),date(),mktime()区别介绍
2013/09/28 PHP
php使用GD实现颜色渐变实例
2015/06/02 PHP
php抓取并保存网站图片的实现代码
2015/10/28 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
php生成与读取excel文件
2016/10/14 PHP
PHP中CheckBox多选框上传失败的代码写法
2017/02/13 PHP
jquery选择器之属性过滤选择器详解
2014/01/27 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
JavaScript函数详解
2014/11/17 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
JavaScript获取网页支持表单字符集的方法
2015/04/02 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
2017/07/10 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
vue中的watch监听数据变化及watch中各属性的详解
2018/09/11 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
2019/01/23 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python监控主机是否存活并以邮件报警
2015/09/22 Python
wxPython实现文本框基础组件
2019/11/18 Python
python Selenium 库的使用技巧
2020/10/16 Python
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
自我鉴定范文
2013/11/10 职场文书
学生自我鉴定
2013/12/18 职场文书
新任教师自我鉴定
2014/02/24 职场文书
岗位职责怎么写
2014/03/14 职场文书
金融保险专业求职信
2014/09/03 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书
商品陈列协议书
2014/09/29 职场文书
就业协议书范本
2014/10/08 职场文书
婚前协议书范本
2014/10/27 职场文书
水电工岗位职责
2015/02/14 职场文书