微信小程序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 相关文章推荐
js从10种颜色中随机取色实现每次取出不同的颜色
Oct 23 Javascript
javascript中处理时间戳为日期格式的方法
Jan 02 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
May 14 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 Javascript
JavaScript获取页面中第一个锚定文本的方法
Apr 03 Javascript
深入浅析knockout源码分析之订阅
Jul 12 Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 Javascript
jquery编写日期选择器
Mar 16 Javascript
10个经典的网页鼠标特效代码
Jan 09 Javascript
JavaScript 中的 this 工作原理
Jun 20 Javascript
vue组件之间的数据传递方法详解
Apr 19 Javascript
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
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实现中文转数字
2016/02/18 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
JS中动态添加事件(绑定事件)的代码
2011/01/09 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
js选项卡的实现方法
2015/02/09 Javascript
JS实现为表格动态添加标题的方法
2015/03/31 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
JavaScript模块规范之AMD规范和CMD规范
2015/10/27 Javascript
不用一句js代码初始化组件
2016/01/27 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
详解Node.js中exports和module.exports的区别
2017/04/19 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
Python中使用中文的方法
2011/02/19 Python
Python运行的17个时新手常见错误小结
2012/08/07 Python
Python判断操作系统类型代码分享
2014/11/22 Python
Python字符串格式化
2015/06/15 Python
Python简单实现安全开关文件的两种方式
2016/09/19 Python
python3实现爬取淘宝美食代码分享
2018/09/23 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
2014/12/30 HTML / CSS
初中体育教学反思
2014/01/14 职场文书
淘宝活动策划方案
2014/02/06 职场文书
黄河的主人教学反思
2014/02/07 职场文书
喝酒检查书范文
2014/02/23 职场文书
工作总结之小学教师体育工作范文(3篇)
2019/10/07 职场文书
压缩Redis里的字符串大对象操作
2021/06/23 Redis
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers
索尼ICF-5900W收音机测评
2022/04/24 无线电