微信小程序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 相关文章推荐
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
Aug 08 Javascript
js时间日期格式化封装函数
Dec 02 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
Feb 17 Javascript
jquery操作select取值赋值与设置选中实例
Feb 28 Javascript
微信小程序 首页制作简单实例
Apr 07 Javascript
Angular.js中控制器之间的传值详解
Apr 24 Javascript
jquery.validate表单验证插件使用详解
Jun 21 jQuery
vue中使用heatmapjs的示例代码(结合百度地图)
Sep 05 Javascript
为vue项目自动设置请求状态的配置方法
Jun 09 Javascript
Vue根据条件添加click事件的方式
Nov 09 Javascript
解决await在forEach中不起作用的问题
Feb 25 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递归函数返回值使用方法
2013/02/18 PHP
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
Yii框架操作cookie与session的方法实例详解
2019/09/04 PHP
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
JS对象转换为Jquery对象实现代码
2013/12/29 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
2016/02/29 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
2019/01/24 Javascript
express中static中间件的具体使用方法
2019/10/17 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
2020/03/26 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
[54:28]EG vs OG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python常用随机数与随机字符串方法实例
2015/04/09 Python
python插入排序算法实例分析
2015/07/03 Python
Python中 map()函数的用法详解
2018/07/10 Python
Selenium(Python web测试工具)基本用法详解
2018/08/10 Python
Python获取当前脚本文件夹(Script)的绝对路径方法代码
2019/08/27 Python
python线程信号量semaphore使用解析
2019/11/30 Python
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
优秀企业获奖感言
2014/02/01 职场文书
学习雷锋寄语大全
2014/04/11 职场文书
师范生求职自荐信
2014/06/14 职场文书
社会工作专业自荐信
2014/09/26 职场文书
支行行长竞聘报告
2014/11/06 职场文书
营业用房租赁协议书
2014/11/26 职场文书
品质保证书格式
2015/02/28 职场文书