微信小程序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 相关文章推荐
SuperSlide2实现图片滚动特效
Jun 20 Javascript
jquery常用操作小结
Jul 21 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
Aug 27 Javascript
jQuery层次选择器用法示例
Sep 09 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
Oct 26 Javascript
vue 2.0组件与v-model详解
Mar 27 Javascript
Javascript 之封装(Package)
Sep 14 Javascript
详解nuxt路由鉴权(express模板)
Nov 21 Javascript
Node.js 多线程完全指南总结
Mar 27 Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 Javascript
js canvas实现俄罗斯方块
Oct 11 Javascript
如何利用js在两个html窗口间通信
Apr 27 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
提升PHP速度全攻略
2006/10/09 PHP
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
示例详解Laravel重置密码代码重构
2016/08/10 PHP
PHP获取链表中倒数第K个节点的方法
2018/01/18 PHP
PHP判断是否是微信打开还是浏览器打开的方法
2019/02/27 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
js event事件的传递与冒泡处理
2009/12/06 Javascript
关于javascript DOM事件模型的两件事
2010/07/22 Javascript
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
2015/08/14 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
Angular 项目实现国际化的方法
2018/01/08 Javascript
详解Vue 多级组件透传新方法provide/inject
2018/05/09 Javascript
JS实现关键词高亮显示正则匹配
2018/06/22 Javascript
vue-router重定向不刷新问题的解决
2018/06/25 Javascript
Vue 中对图片地址进行拼接的方法
2018/09/03 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
Python 元类使用说明
2009/12/18 Python
Python用zip函数同时遍历多个迭代器示例详解
2016/11/14 Python
关于Python中空格字符串处理的技巧总结
2017/08/10 Python
【python】matplotlib动态显示详解
2019/04/11 Python
python3中property使用方法详解
2019/04/23 Python
python 初始化一个定长的数组实例
2019/12/02 Python
美体小铺英国官网:The Body Shop英国
2017/01/24 全球购物
关联、聚合(Aggregation)以及组合(Composition)的区别
2012/02/29 面试题
DTD的含义以及作用
2014/01/26 面试题
厨房管理计划书
2014/04/27 职场文书
高中生学习计划书
2014/09/15 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书
社区服务活动感想
2015/08/11 职场文书
某某店铺的开业庆典主持词范本
2019/11/25 职场文书