微信小程序之抽屉

最新推荐文章于 2025-11-14 10:14:48 发布

原创

最新推荐文章于 2025-11-14 10:14:48 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用微信小程序构建一个带有动画的抽屉组件，包括wxml结构、对应的CSS样式和JavaScript逻辑。通过展示`<view>`、`.mask`和`.drawer-box`等元素的交互及状态管理，读者可以了解如何控制抽屉的显示和隐藏以及触发动画过程。

微信小程序之抽屉

wxml
- css
- js

wxml

// An highlighted block
<view  data-status="open"  bindtap="handleShowTecModelClick">抽屉</view>
<view class="mask" data-status="close" wx:if="{
   
   {model}}" bindtap='handleCancelTecClick'></view>
<view animation="{
   
   {animationData}}" class="drawer-box" wx:if="{
   
   {model}}">
	<view class="mark-box">抽屉内容</view>
  <view class="footer-button">
		<view   bindtap='handleCancelTecClick' data-status="close">取消</view>
		<view   bindtap="handleChangeTecClick" data-status="close">确定</view>