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

已于 2023-11-23 12:29:36 修改
阅读量4.6k 收藏 89
点赞数 17
分类专栏： 微信小程序 文章标签： 小程序 滑动抽屉 特效 侧屏 页中页
于 2022-09-26 16:26:44 首次发布
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/weixin_42794881/article/details/127054827
版权
微信小程序 专栏收录该内容
73 篇文章 1071 订阅 ¥9.90 ¥99.00
订阅专栏
本文介绍了如何在微信小程序中实现侧滑抽屉菜单和页中页效果，详细阐述了实现步骤，包括scroll-view的定义、遮盖层的添加以及动态class的渲染。内容涵盖零售电商、餐饮外卖等多个应用场景，展示了微信小程序在各领域的广泛应用。
摘要由CSDN通过智能技术生成

目录

一、引言

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

小程序介绍

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

了解本专栏 订阅专栏 解锁全文
摔跤猫子
关注
专栏目录
订阅专栏
微信小程序之自定义抽屉菜单（从下拉出）实例 —— 微信小程序实战系列（7）
2401_84149198的博客
04-20 987
在此为大家准备了四节优质的Android高级进阶视频：架构师项目实战——全球首批Android开发者对Android架构的见解。
Lodop中页眉页脚的实现
qq_36902889的博客
04-17 2768
功能描述：要货单打印功能，可打印多个要货单.。每个要货单有里面都多种商品.，按照不同的的要货单把里面的商品打印出来。 实现方式：首先在在前端页面画出所需要的打印的模板（我用的是vue），用到了组件。需要向组件里面后台接口返回的list。自己需要什么参数返回什么。具体看返回的结构来遍历 <template> <div class="app-container calenda...
微信小程序实现滑动侧边栏
Archimelan的博客
10-26 4670
This is Body This is sideBar .sideBar { background: red; position: fixed; width: 300px; height: 100%; top: 0; right: 0; transform: translate(300px); transition: all 0.5s ea
微信小程序导航栏(Navigation Bar)组件使用指南
最新发布
gitblog_00649的博客
08-16 1381
微信小程序导航栏(Navigation Bar)组件使用指南 navigation-barweapp custom component -- navigation-bar项目地址:https://gitcode.com/gh_mirrors/nav/navigation-bar 项目介绍 微信小程序的导航栏组件是开发中不可或缺的一部分，本项目基于GitHub上的wechat-miniprogr...
微信小程序开发：侧边抽屉栏实现.docx
04-21
上传本资源文档，是为了方便复制使用，要积分不是目的，目的在于分享。本资源主要分享的就是微信小程序的侧边抽屉菜单栏实现的核心代码。
简单抽屉效果，初学者请入内
msyqmsyq的博客
10-21 1532
基本实现思路如下：         先在控制器创建好想要弹出的自定义View，其位置放到屏幕 边界之外即可。（看不到就行），点击按钮后将方才的View的frame修成到屏幕可见位置，调用UIView动画使得过度自然即可。效果图如下，同时我们需要实现弹出后最左边的六分之一左右的变暗的效果（通过改变UIView透明度来实现）以及点击变暗区域将抽屉关闭的功能。这时我们需要借助点击手势UITapGest
详解vue-router 动态路由下子页面多页共活的解决方案
10-15
为了实现多页共活，我们可以创建一个新的组件 `UserPage`，它使用 `v-for` 循环渲染多个 `User` 组件，并通过 `v-show` 控制当前选中的组件可见： ```vue v-for="_id in idList" v-show="_id === id" :id="_...
word2021中页眉页脚七个使用技巧.docx
09-27
### Word2021中页眉页脚七个实用技巧详解 #### 妙招1：充分利用页眉页脚工具栏 在Word2021中，页眉和页脚的操作通常是在专门的编辑区内完成的。为了更好地编辑页眉页脚内容，我们需要进入“视图”选项卡，点击...
vue中页面向另一页面传递数据的实例代码(实现加减功能)
05-28
假设我们有两个页面，分别是`PageA.vue`和`PageB.vue`，我们要在这两个页面之间传递一个数值，并在`PageB.vue`中实现加减功能。具体步骤如下： 1. 在`PageA.vue`中定义一个变量`num`，并将其传递给`PageB.vue`页面...
微信小程序实战之自定义抽屉菜单（7）
08-30
主要为大家详细介绍了微信小程序实战之自定义抽屉菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序实用小组件：抽屉层实现属性选择或时间选择
03-15
实现了抽屉层来选择所需属性或者日期 可用于商品的属性选择，，自定义日期选择，，或者其他类型的自定义功能选择。 此处是实现了对于属性的选择，可自己布局按钮或者输入框或者其他什么需要的。   此处实现了对于时间的选择，，做了一个判断，，获取当前时间来和所需时间判断，然后决定是否可点击，的样式   此demo是借鉴了另外一位大大的抽屉层样式，然后自己在上面进行了布局和扩展，提供给需要的人 代码和布局也比较简单，另外水平有限，勿怪。 免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请
微信小程序开发教程-抽屉菜单
大灰狼的小绵羊哥哥的博客
01-13 3107
抽屉菜单是app上常见的菜单设计方式，典型的抽屉菜单如下图所示 下面展示如何基于微信小程序实现抽屉菜单,最终效果如下图所示：  页面包含一个主页和抽屉菜单页，为了实现滑动效果，页面采用absolute布局，代码如下  index.wxml view id='id-main-page' class='main-page' animation='{{animationDat
小程序实现刷选-右边抽屉效果
未名胡的博客
07-16 1166
<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 3080
效果图： 封装好的左侧抽屉组件，需要的同学可以到这里拿： https://download.csdn.net/download/wy313622821/20278190
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

摔跤猫子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值