微信小程序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 相关文章推荐
jquery退出each循环的写法
Feb 26 Javascript
jQuery使用andSelf()来包含之前的选择集
May 19 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
Aug 03 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
Jan 15 Javascript
JavaScript实现页面跳转的方式汇总
May 16 Javascript
微信小程序 空白页重定向解决办法
Jun 27 Javascript
vue2.0 keep-alive最佳实践
Jul 06 Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 Javascript
JS库之Particles.js中文开发手册及参数详解
Sep 13 Javascript
Vue.js 十五分钟入门图文教程
Sep 12 Javascript
使用vue-router切换页面时实现设置过渡动画
Oct 31 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
ThinkPHP之getField详解
2014/06/20 PHP
非常全面的php日期时间运算汇总
2015/11/04 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
javascript动画效果类封装代码
2007/08/28 Javascript
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
Javascript 判断客户端浏览器类型代码
2010/03/01 Javascript
jquery 图片轮换效果
2010/07/29 Javascript
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
浅谈vue 单文件探索
2018/09/05 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
微信小程序开发问题之wx.previewImage
2018/12/25 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
2019/07/29 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
2019/11/21 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
解决vant-UI库修改样式无效的问题
2020/11/03 Javascript
python中的__slots__使用示例
2015/02/26 Python
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
Pandas读取csv时如何设置列名
2020/06/02 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
初探CSS3中的calc()功能
2015/07/14 HTML / CSS
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
中软Java笔试题
2012/11/11 面试题
毕业学生推荐信
2013/12/01 职场文书
保险专业自荐信范文
2014/02/20 职场文书
运动会拉拉队口号
2014/06/09 职场文书
2014年采购员工作总结
2014/11/18 职场文书
小学生差生评语
2014/12/29 职场文书
选择比努力更重要?这是长期以来对“努力”的最大误解
2019/07/12 职场文书