微信小程序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图像处理—为矩阵添加常用方法
Dec 27 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
angularJS中router的使用指南
Feb 09 Javascript
Bootstrap每天必学之下拉菜单
Nov 25 Javascript
JS简单生成两个数字之间随机数的方法
Aug 03 Javascript
Bootstrap基本模板的使用和理解1
Dec 14 Javascript
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 Javascript
vue项目中api接口管理总结
Apr 20 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
Apr 22 Javascript
详解 微信小程序开发框架(MINA)
May 17 Javascript
vue resource发送请求的几种方式
Sep 30 Javascript
微信小程序连续签到7天积分获得功能的示例代码
Aug 20 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
文件上传的实现
2006/10/09 PHP
php使用多个进程同时控制文件读写示例
2014/02/28 PHP
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
PHP递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
PHP面向对象程序设计实例分析
2016/01/26 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
js jquery数组介绍
2012/07/15 Javascript
js 验证密码强弱的小例子
2013/03/21 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
js检测判断日期大于多少天的方法
2015/05/04 Javascript
javaScript语法总结
2016/11/25 Javascript
Angularjs2不同组件间的通信实例代码
2017/05/06 Javascript
Angular 2.0+ 的数据绑定的实现示例
2017/08/09 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
微信小程序获取地理位置及经纬度授权代码实例
2019/09/18 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
JavaScript oncopy事件用法实例解析
2020/05/13 Javascript
nuxt 每个页面head标签内容设置方式
2020/11/05 Javascript
在centos7中分布式部署pyspider
2017/05/03 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
python requests更换代理适用于IP频率限制的方法
2019/08/21 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
用python写爬虫简单吗
2020/07/28 Python
Python使用xpath实现图片爬取
2020/09/16 Python
利用Python实现自动扫雷小脚本
2020/12/17 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
初中体育教学反思
2014/01/14 职场文书
致接力运动员广播稿
2014/02/17 职场文书
幼儿园家长寄语
2014/04/02 职场文书
软件售后服务承诺书
2014/05/21 职场文书
个人公司授权委托书范本
2014/10/12 职场文书
2015年科协工作总结
2015/05/19 职场文书
2016新年致辞
2015/08/01 职场文书