微信小程序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 处理URL实用技巧
Nov 23 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
Jan 15 Javascript
实现js保留小数点后N位的代码
Nov 13 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
vue图片加载与显示默认图片实例代码
Mar 16 Javascript
vue-prop父组件向子组件进行传值的方法
Mar 01 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
Aug 27 Javascript
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
node.js的http.createServer过程深入解析
Jun 06 Javascript
JavaScript实现随机五位数验证码
Sep 27 Javascript
基于ajax实现上传图片代码示例解析
Dec 03 Javascript
详解微信小程序轨迹回放实现及遇到的坑
Feb 02 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数组应该有多大的分析
2009/07/30 PHP
一步一步学习PHP(3) php 函数
2010/02/15 PHP
php getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
2016/08/17 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
通过javascript的匿名函数来分析几段简单有趣的代码
2010/06/29 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
js倒计时显示实例
2016/12/11 Javascript
jquery+html仿翻页相册功能
2016/12/20 Javascript
js实现带三角符的手风琴效果
2017/03/01 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
angularJs中$http获取后台数据的实例讲解
2018/08/08 Javascript
jQuery实现基本隐藏与显示效果的方法详解
2018/09/05 jQuery
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
[02:10]DOTA2 TI10勇士令状玩法及不朽Ⅰ展示:焕新世界,如你所期
2020/05/29 DOTA
简单了解什么是神经网络
2017/12/23 Python
Html5饼图绘制实现统计图的方法
2020/08/05 HTML / CSS
意大利奢侈品购物网站:Giglio
2018/01/05 全球购物
TUMI新加坡官网:国际领先的商旅箱包品牌
2019/01/12 全球购物
自我评价的范文
2014/02/02 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
物业管理委托协议(2篇)
2014/09/23 职场文书
教师批评与自我批评剖析材料
2014/10/16 职场文书
化工见习报告范文
2014/10/31 职场文书
员工离职通知函
2015/04/25 职场文书
道歉情书大全
2015/05/12 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书
JPA如何使用entityManager执行SQL并指定返回类型
2021/06/15 Java/Android
Mysql 一主多从的部署
2022/05/20 MySQL