微信小程序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(DHTML)中的一些技巧
Jan 09 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
Apr 27 Javascript
javascript 函数及作用域总结介绍
Nov 12 Javascript
js同源策略详解
May 21 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
Aug 04 Javascript
JS实现仿微信支付弹窗功能
Jun 25 Javascript
详解Jest结合Vue-test-utils使用的初步实践
Jun 27 Javascript
vue router 跳转时打开新页面的示例方法
Jul 28 Javascript
JS实现简易留言板特效
Dec 23 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
Feb 10 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
Aug 07 Javascript
vue实现滑动解锁功能
Mar 03 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
PHP中cookies使用指南
2007/03/16 PHP
thinkphp实现like模糊查询实例
2014/10/29 PHP
PHP中使用Memache作为进程锁的操作类分享
2015/03/30 PHP
php跨服务器访问方法小结
2015/05/12 PHP
变量在 PHP7 内部的实现(二)
2015/12/21 PHP
PHP内存缓存功能memcached示例
2016/10/19 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
2012/02/03 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
nodejs爬虫初试superagent和cheerio
2018/03/05 NodeJs
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
Vue-cli3简单使用(图文步骤)
2019/04/30 Javascript
python for循环输入一个矩阵的实例
2018/11/14 Python
Python中新式类与经典类的区别详析
2019/07/10 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
pytorch 实现打印模型的参数值
2019/12/30 Python
tensorflow 重置/清除计算图的实现
2020/01/19 Python
详解如何使用Pytest进行自动化测试
2021/01/14 Python
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
酒店出纳岗位职责
2013/12/29 职场文书
幼儿园庆六一游园活动方案
2014/01/29 职场文书
《木笛》教学反思
2014/03/01 职场文书
财务内勤岗位职责
2014/04/17 职场文书
导师工作推荐信范文
2014/05/17 职场文书
任命书范本大全
2014/06/06 职场文书
公司联欢会主持词
2015/07/04 职场文书
浅谈golang package中init方法的多处定义及运行顺序问题
2021/05/06 Golang
Golang gRPC HTTP协议转换示例
2022/06/16 Golang