使用小程序实现侧屏抽屉、页中页效果

摔跤猫子

已于 2023-11-23 12:29:36 修改

阅读量4.9k

点赞数 17

分类专栏：微信小程序文章标签：小程序滑动抽屉特效侧屏页中页

于 2022-09-26 16:26:44 首次发布

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/weixin_42794881/article/details/127054827

版权

微信小程序专栏收录该内容

78 篇文章 ¥9.90 ¥99.00

订阅专栏

本文介绍了如何在微信小程序中实现侧滑抽屉菜单和页中页效果，详细阐述了实现步骤，包括scroll-view的定义、遮盖层的添加以及动态class的渲染。内容涵盖零售电商、餐饮外卖等多个应用场景，展示了微信小程序在各领域的广泛应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、引言

抽屉菜单是现在移动端网页、App都很常见的设计，这里将用小程序来实现这一效果。小程序提供了一系列触摸触发的事件，我们可以在这些事件上绑定自定义的响应，即可达到打开关闭菜单的操作效果。引用一张网上的效果图p4

小程序介绍

随着智能手机的普及和移动互联网的发展，微信小程序作为一种全新的应用形式，逐渐在市场上崭露头角。微信小程序不仅具有轻量级、无需下载安装的特点，还能够在微信生态内实现快速的传播

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

摔跤猫子

关注关注

17
点赞
踩
90

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

微信小程序开发：(抽屉)侧边栏主页的实现

全沾软贱开发攻城狮

04-21

1万+

微信小程序的语法和使用和前端的开发非常相似，如果做过前端开发的，再去开发小程序，上手会非常快。本篇博文来分享一下微信小程序开发的时候的侧边抽屉栏效果，侧边栏弹出菜单这个功能还是比较常见的，所以就分享出来，方便使用。 微信小程序的侧边弹出菜单栏的实现和移动端原生App的实现还是有所不同的，毕竟微信小程序的开发是基于前端开发的，使用的方法都是前端的一套逻辑，废话少说，直接上代码，具体操作步骤如下所示...

微信小程序之自定义抽屉菜单（从下拉出）实例 —— 微信小程序实战系列（7）

2401_84149198的博客

04-20

1218

在此为大家准备了四节优质的Android高级进阶视频：架构师项目实战——全球首批Android开发者对Android架构的见解。

参与评论您还未登录，请先登录后发表或查看评论

微信小程序左侧栏分类功能实现指南

最新发布

weixin_42298164的博客

05-10

778

简介：微信小程序是一种无需下载安装的应用形式，其示例“左侧栏分类”关注于展示多级分类或菜单的布局设计。本文从微信小程序的基本架构出发，详细介绍了左侧栏的结构、样式和逻辑处理，以及如何通过微信开发者工具、API、响应式布局和事件处理实现高效的分类导航。同时，文中还强调了性能优化和代码结构的重要性，为开发者提供了学习和实践的机会，以提升小程序开发的技术能力。

微信小程序开发：侧边抽屉栏实现.docx

04-21

上传本资源文档，是为了方便复制使用，要积分不是目的，目的在于分享。本资源主要分享的就是微信小程序的侧边抽屉菜单栏实现的核心代码。

微信小程序开发教程-抽屉菜单

大灰狼的小绵羊哥哥的博客

01-13

3267

抽屉菜单是app上常见的菜单设计方式，典型的抽屉菜单如下图所示下面展示如何基于微信小程序实现抽屉菜单,最终效果如下图所示：页面包含一个主页和抽屉菜单页，为了实现滑动效果，页面采用absolute布局，代码如下 index.wxml view id='id-main-page' class='main-page' animation='{{animationDat

简单抽屉效果，初学者请入内

msyqmsyq的博客

10-21

1571

基本实现思路如下：先在控制器创建好想要弹出的自定义View，其位置放到屏幕边界之外即可。（看不到就行），点击按钮后将方才的View的frame修成到屏幕可见位置，调用UIView动画使得过度自然即可。效果图如下，同时我们需要实现弹出后最左边的六分之一左右的变暗的效果（通过改变UIView透明度来实现）以及点击变暗区域将抽屉关闭的功能。这时我们需要借助点击手势UITapGest

小程序实现刷选-右边抽屉效果

未名胡的博客

07-16

1209

<view bindtap="showRight">刷选</view> <view class="leftBox '{{leftView?'leftActive':''}}'" bindtap='hideLeft' data-item="1"> <view class="left goods-detail '{{leftView?'leftActive':''}}'" catchtap='getleft'> <text class="c...

微信小程序——抽屉（左侧菜单）

wy313622821的博客

07-14

3201

效果图：封装好的左侧抽屉组件，需要的同学可以到这里拿： https://download.youkuaiyun.com/download/wy313622821/20278190

微信小程序实战之自定义抽屉菜单（7）

08-30

主要为大家详细介绍了微信小程序实战之自定义抽屉菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

微信小程序实用小组件：抽屉层实现属性选择或时间选择

03-15

实现了抽屉层来选择所需属性或者日期可用于商品的属性选择，，自定义日期选择，，或者其他类型的自定义功能选择。此处是实现了对于属性的选择，可自己布局按钮或者输入框或者其他什么需要的。此处实现了对于时间的选择，，做了一个判断，，获取当前时间来和所需时间判断，然后决定是否可点击，的样式此demo是借鉴了另外一位大大的抽屉层样式，然后自己在上面进行了布局和扩展，提供给需要的人代码和布局也比较简单，另外水平有限，勿怪。免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请

探索`wx-drawer`: 一个创新的微信小程序侧滑抽屉组件

gitblog_00037的博客

03-30

678

探索wx-drawer: 一个创新的微信小程序侧滑抽屉组件去发现同类优质开源项目:https://gitcode.com/ 在当今的移动应用开发中，用户体验的设计是至关重要的。特别是对于微信小程序，简洁流畅的操作方式可以极大地提升用户的满意度。今天我们要介绍的开源项目——，就是一个专为微信小程序设计的侧滑抽屉组件，它带来了诸多创新和实用特性。项目简介 wx-drawer是由开发者@zhongj...

微信小程序-时间轴/抽屉展开收起特效

驚鴻入梦

04-13

2290

微信小程序项目中用到的时间轴展示和抽屉展开收起特效本篇内容为原创，转载请注明出处。一、效果图二、代码片段： 1、wxml部分 <view class="card"> <view class="cardTitle" bindtap="changeUpDown">我是标题  &lt...

微信小程序之抽屉

weixin_46899191的博客

01-22

1493

微信小程序之抽屉wxmlcssjs 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

小程序抽屉导航栏带动画

aaron9185的博客

12-22

539

效果： js Page({ data: { showModalStatus: 0, }, onLoad: function(options) { }, onShow: function() { }, //开启导航栏关闭导航栏 setModalStatus: function(e) { console.log("设置显示...