微信小程序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跟随滚动条滚动浮动代码
Dec 31 Javascript
计算世界完全对称日的js代码,粗糙版
Nov 04 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
Apr 01 Javascript
JavaScript移除数组元素减少长度的方法
Sep 05 Javascript
中止javascript执行的方法
Feb 14 Javascript
js动态修改整个页面样式达到换肤效果
May 23 Javascript
js/jquery判断浏览器的方法小结
Sep 02 Javascript
JavaScript无阻塞加载和defer、async详解
Feb 26 Javascript
Vue-路由导航菜单栏的高亮设置方法
Mar 17 Javascript
ES6入门教程之let、const的使用方法
Apr 13 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
Jul 28 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 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 swfupload图片上传的实例代码
2013/09/30 PHP
php结合安卓客户端实现查询交互实例
2015/05/05 PHP
PHP yii实现model添加默认值的方法(两种方法)
2016/11/10 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
JS比较2个日期间隔的示例代码
2014/04/15 Javascript
jQuery截取指定长度字符串的实现原理及代码
2014/07/01 Javascript
jquery滚动条插件(可以自定义)
2016/12/11 Javascript
学好js,这些js函数概念一定要知道【推荐】
2017/01/19 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
vue.js实现单选框、复选框和下拉框示例
2017/07/18 Javascript
vue element-ui table表格滚动加载方法
2018/03/02 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
小程序实现列表倒计时功能
2021/01/29 Javascript
深入理解Python 代码优化详解
2014/10/27 Python
python实现隐马尔科夫模型HMM
2018/03/25 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
Python实现带下标索引的遍历操作示例
2019/05/30 Python
django如何实现视图重定向
2019/07/24 Python
python字典的遍历3种方法详解
2019/08/10 Python
python实现人脸签到系统
2020/04/13 Python
django 外键创建注意事项说明
2020/05/20 Python
Python Map 函数的使用
2020/08/28 Python
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
党员公开承诺书范文
2014/03/25 职场文书
党支部承诺书范文
2014/03/28 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
人事任命书怎么写
2014/06/05 职场文书
支部组织生活会方案
2014/06/10 职场文书
个人作风建设心得体会
2014/10/22 职场文书
财务会计实训报告
2014/11/05 职场文书
2014年维修工作总结
2014/11/22 职场文书
网吧员工管理制度
2015/08/05 职场文书