实现一个抽屉菜单的案例

wxml

<!--button-->
<view class="btn" bindtap="powerDrawer" data-statu="open">button</view>
<!--mask-->
<view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view>
<!--content-->
<!--使用animation属性指定需要执行的动画-->
<view animation="{{animationData}}" class="drawer_attr_box" wx:if="{{showModalStatus}}">
<!--drawer content-->
<view class="drawer_content">
<view class="drawer_title line">菜单1</view>
<view class="drawer_title line">菜单2</view>
<view class="drawer_title line">菜单3</view>
<view class="drawer_title line">菜单4</view>
<view class="drawer_title">菜单5</view>
</view>
</view>

css

/*button*/
.btn {
width: 80%;
padding: 20rpx 0;
border-radius: 10rpx;
text-align: center;
margin: 40rpx 10%;
background: #0C1939;
color: #fff;
}
/*mask*/
.drawer_screen {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background: #000;
opacity: 0.2;
overflow: hidden;
}
/*content*/
.drawer_attr_box {
width: 100%;
overflow: hidden;
position: fixed;
bottom: 0;
left: 0;
z-index: 1001;
background: #fff;
}
.drawer_content {
padding: 20rpx 40rpx;
height: 470rpx;
overflow-y: scroll;
}
.drawer_title{
padding:20rpx;
font:42rpx "microsoft yahei";
text-align: center;
}
.line{
border-bottom: 1px solid #f8f8f8;
}

  

js

Page({
data: {
showModalStatus: false
},
powerDrawer: function (e) {
var currentStatu = e.currentTarget.dataset.statu;
this.util(currentStatu)
},
util: function (currentStatu) {
/* 动画部分 */
// 第1步:创建动画实例
var animation = wx.createAnimation({
duration: 200, //动画时长
timingFunction: "linear", //线性
delay: 0 //0则不延迟
}); // 第2步:这个动画实例赋给当前的动画实例
this.animation = animation; // 第3步:执行第一组动画:Y轴偏移240px后(盒子高度是240px),停
animation.translateY(240).step(); // 第4步:导出动画对象赋给数据对象储存
this.setData({
animationData: animation.export()
}) // 第5步:设置定时器到指定时候后,执行第二组动画
setTimeout(function () {
// 执行第二组动画:Y轴不偏移,停
animation.translateY(0).step()
// 给数据对象储存的第一组动画,更替为执行完第二组动画的动画对象
this.setData({
animationData: animation
}) //关闭抽屉
if (currentStatu == "close") {
this.setData(
{
showModalStatus: false
}
);
}
}.bind(this), 200) // 显示抽屉
if (currentStatu == "open") {
this.setData(
{
showModalStatus: true
}
);
}
}
})

参考链接:https://blog.csdn.net/u012509485/article/details/80488519

微信小程序 -- 自定义抽屉式菜单(底部,从下向上拉出)的更多相关文章

  1. 微信小程序自定义底部导航栏组件+跳转

    微信小程序本来封装有底部导航栏,但对于想自定义样式和方法的开发者来说,这并不是很好. 参考链接:https://github.com/ljybill/miniprogram-utils/tree/ma ...

  2. 微信小程序-自定义底部导航

    代码地址如下:http://www.demodashi.com/demo/14258.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  3. 微信小程序自定义tabbar的实现

    微信小程序自定义tabbar的实现 目的:当采用微信的自定义tabbar组件的时候,切换的时候会出现闪屏的效果:当使用微信默认的tabbar的时候,限制了tabbar的数量以及灵活配置. 方案:自己动 ...

  4. 微信小程序自定义Tabber,附详细源码

    目录 1,前言 2,说明 3,核心代码 1,前言 分享一个完整的微信小程序自定义Tabber,tabber按钮可以设置为跳转页面,也可以设置为功能按钮.懒得看文字的可以直接去底部,博主分享了小程序代码 ...

  5. 微信小程序——自定义导航栏

    微信头部导航栏可能通过json配置: 但是有时候我们项目需求可能需要自定义头部导航栏,如下图所示: 现在具体说一下实现步骤及方法: 步骤: 1.在 app.json 里面把 "navigat ...

  6. 微信小程序自定义弹窗wcPop插件|仿微信弹窗样式

    微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的 ...

  7. 微信小程序自定义 tabbar

    一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...

  8. 微信小程序把玩(三)tabBar底部导航

    原文:微信小程序把玩(三)tabBar底部导航 tabBar相对而言用的还是比较多的,但是用起来并没有难,在app.json中配置下tabBar即可,注意tabBar至少需要两个最多五个Item选项 ...

  9. 微信小程序 自定义导航组件 nav头部 全面屏设计

    nav-dynamic 微信小程序自定义nav头部组件:适配全面屏设计: 实现功能 初始进入页面时,展示初始状态下的nav样式: 页面滚动时,监听页面滚动事件,展示滚动状态下的nav样式: 根据配置字 ...

随机推荐

  1. Codeforces Round #568 (Div. 2) 选做

    A.B 略,相信大家都会做 ^_^ C. Exam in BerSU 题意 给你一个长度为 \(n\) 的序列 \(a_i\) .对于每个 \(i\in [1,N]\) 求 \([1,i-1]\) 中 ...

  2. python读取csv转换为dataframe

    前言: 由于在处理结构性数据的时候经常会读取本地形如:.xls.xlsx.csv等的数据.所以今天就花了点时间来总结一下利用python读取csv数据并且转换为dataframe的数据框架.话不多说, ...

  3. 八: IO流,数据的读写传输

    IO流概括图: IO流的分类:  按流: 输入流(InputStream和Reader):从硬盘或者别的地方读入内存 输出流(OutputStream和Writer):从内存里向硬盘或别的地方输出 按 ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:按钮标签

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. NO33 第6--7关题目讲解

    客户端(电脑)通过浏览器输入域名,先找hosts文件及本地dns缓存,若都没有,就找localDNS服务器,若没有,localDNF服务器找根服务器(全球13台的那个根”.“服务器),根就把.com这 ...

  6. Windows驱动开发-r3和r0通信

    用户部分代码: int main() { HANDLE hDevice = CreateFile(L, NULL, OPEN_EXISTING, FILE_ATTRIBUTE_NORMAL, NULL ...

  7. Docker 学习之mysql与redis(二)

    在上一随笔中主要就是记录docker的基本使用以及nginx与php服务器的配置:在这一章将主要记录docker安装mysql与redis. 本节随笔参考网址:https://www.runoob.c ...

  8. springboot自动配置

    1.spring-boot-autoconfigure-2.1.7.BUILD-SNAPSHOT-sources.jar 2.如何查看项目中启动和未启动的自动配置: application.prope ...

  9. junit小试log4j及xml配置文件说明

        上篇文章介绍了java日志框架使用情况,以及xml配置文件的简单说明.但主要还是根据别人的博客整理一下知识结构,只能是纸上谈兵,本文通过junit测试框架来玩玩log4j. 1.junit+l ...

  10. 04.Delphi通过接口IInterface实现多重继承

    IInterface表示申明了一些函数,自己本身没有实现部分,需要由继承它的类来实现函数 uSayHello代码如下 unit uSayHello; interface uses SysUtils, ...