微信小程序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 相关文章推荐
jquery1.4 教程二 ajax方法的改进
Feb 25 Javascript
jquery获取radio值实例
Oct 16 Javascript
函数window.open实现关闭所有的子窗口
Aug 03 Javascript
使用three.js 画渐变的直线
Jun 05 Javascript
javascript实现滚动效果的数字时钟实例
Jul 21 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
整理关于Bootstrap导航的慕课笔记
Mar 29 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
Dec 03 Javascript
关于vue的npm run dev和npm run build的区别介绍
Jan 14 Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 Javascript
JavaScript实现秒杀时钟倒计时
Sep 29 Javascript
javascript单张多张图无缝滚动实例代码
May 10 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
在任意字符集下正常显示网页的方法一
2007/04/01 PHP
让Json更懂中文(JSON_UNESCAPED_UNICODE)
2011/10/27 PHP
一个经典实用的PHP图像处理类分享
2014/11/18 PHP
使用php转义输出HTML到JavaScript
2015/03/27 PHP
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
2009/05/21 Javascript
jQuery学习4 浏览器的事件模型
2010/02/07 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
2019/09/21 Javascript
让IDE识别webpack的别名alias的实现方法
2020/05/06 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
Python中多线程的创建及基本调用方法
2016/07/08 Python
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
Python使用matplotlib 模块scatter方法画散点图示例
2019/09/27 Python
使用Python实现牛顿法求极值
2020/02/10 Python
Python中的特殊方法以及应用详解
2020/09/20 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
小区门卫岗位职责
2013/12/31 职场文书
矫正人员思想汇报
2014/01/08 职场文书
大学毕业感言
2014/01/10 职场文书
高中教师评语大全
2014/04/25 职场文书
食品销售计划书
2014/04/26 职场文书
2014年体育部工作总结
2014/11/13 职场文书
入党积极分子培养人意见
2015/06/02 职场文书
《观察物体》教学反思
2016/02/17 职场文书
nginx部署多前端项目的几种方法
2021/05/25 Servers
详解php中流行的rpc框架
2021/05/29 PHP
Django模型层实现多表关系创建和多表操作
2021/07/21 Python
15个值得收藏的JavaScript函数
2021/09/15 Javascript