小程序左侧抽屉动画（侧栏菜单）

最新推荐文章于 2025-06-19 15:24:40 发布

Mr_ccup

最新推荐文章于 2025-06-19 15:24:40 发布

阅读量4.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端代码微信小程序文章标签：小程序微信小程序

本文链接：https://blog.youkuaiyun.com/Mr_ccup/article/details/85621069

小程序对于JS的高度封装让每个前端用户都有一种撕心裂肺的感觉；
由于不能是用JS来获取DOM，所以以往使用Jquery编写的动画，在小程序里面都不能使用；
**
**
忘了从哪里看到的文章，这里我用自己的方式给他整理出来~知识都在于分享。

首先微信下程序的每一个页面基本的格式是由四个文件来表现的，分别是：
wxml结构层；
wxss样式层；
js逻辑层；
json数据层；以下主要以前三个层来分别阐述：

wxml：

bindtap 是点击事件；
data-statu 是自己声明的数据；
wx:if 是条件渲染用来控制模块是否显示这里也可以使用hidden；
animation 是小程序声明动画

<!--蒙版抽屉曾-->
<view class='mask' bindtap="powerDrawer" data-statu="close" wx:if="{
    
    {showModalStatus}}">  </view>
<view class='Drawer' animation="{
    
    {animationData}}" wx:if="{
    
    {showModalStatus}}">  </view>

<!--主界面-->