专注连锁门店会员营销管理系统
线上+线下+进销存+收银+会员2020-09-27 作者:秩名
小程序实现多折叠展开菜单非常常见,想实现也非常简单,下面为大家介绍如何实现的方式
小程序实现多折叠展开菜单效果展示:
开始正题
上方Nav
基本 flex 布局再加个 padding 不需要多讲吧?
提一下,微信小程序里input的placeholder样式是写在 placeholder-style 里或使用 placeholder-class
下方菜单
每个小卡片遵从 flex 布局,设置 width: 50% ,别忘了 flex-wrap: wrap
每个小卡片内部同为 flex 布局并设置垂直居中,想了想还是科普下:
.main-view-item{
display: flex;
justify-content: center;
align-items: center;
width: 50%;
}
动画
微信小程序的动画只能用JS,常规手段不可用,来个头脑风暴hack起来
观察每个卡片的折叠方向后,为每个卡片添加初始 rotate 使其反向折叠,我在这里定义了两个Class
.rotateX90{
transform: rotateX(-90deg);
}
.rotateY90{
transform: rotateY(-90deg);
}
好了这样就看不到卡片了,然后给菜单按钮添加点击事件改变卡片的rotate就Ojbk啦
var duration = 150
var item1 = wx.createAnimation({
duration: duration,
transformOrigin: '0 0 0'
})
item1.rotateX(90).step()
this.setData({
item1: item1,
item1Style: 'item1Style'
})
这里注意调整 transformOrigin 来控制折叠方向,对于后面的卡片在 createAnimation 中添加 delay 字段即可(差为 duration 的等差数列)
是不是很简单嗯?
至于菜单的收回,代码和展开差不多,就是反过来而已,不过有些展开的顺序和 transformOrigin 需要注意,这里还是贴一个代码吧:
var duration = 150
var item3 = wx.createAnimation({
duration: duration,
transformOrigin: '100% 100% 0',
delay: duration * 2
})
item1.rotateX(90).step()
this.setData({
item3: item3,
item3Style: ''
})
另外我在 data 里设置了两个变量 isShow 和 isShowing 来判断菜单是否展开或者正在展开,来控制点击事件,具体实现这里就不讲了
HiShop小程序工具提供多类型商城/门店小程序制作,可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面,所看即所得,只需要美工就能做出精美商城。
线上+线下+进销存+收银+会员门店零售管理好帮手
门店能实现快速收银,提升门店经营效率。
系统自带进销存管理,更好管理库存销售。
配备收银硬件一站式整体服务。
收 银 会员管理 库存管理 商品管理 交接班 数据报表 营销促单 售后处理 多种收款
获取报价推荐文章
最新消息总结,开发一个小程序我们可以选择的第三方框架有5种,大家比较熟悉的有美团小程序框架mpvue,还有组件化框架等...
最近在调研小程序的分享能力,本篇文档主要是调研小程序关于分享方面的玩法,目的是学习小程序在项目应用以及玩法链上...
许多人在使用小程序,会有一个很麻烦的事情,就是使用过小程序之后,会不断的发送自己的定位消息,那么这个小程序的...
一款小程序,很多时候需要调用内置的照相机,实现拍照并图片上传,那么要如何实现呢?...
百货小程序怎么开 随着移动互联网的发展,开设百货小程序成为商家拓展线上业务的重要途径。下面将为您介绍开设百货小...
便利店小程序制作指南 在数字化时代,便利店制作小程序能有效拓展业务、提升用户体验。以下为你介绍便利店小程序制作...
便利店小程序开发全解析 便利店小程序,是基于微信、支付宝等平台的轻量级应用,把实体便利店商品与服务数字化,让用...
便利店小程序自配送指南 便利店通过小程序开展自配送业务,能提升顾客购物便捷性,增强竞争力。以下为您详细介绍便利...
便利店小程序开发多少钱 便利店小程序开发的价格没有固定标准,会受到开发方式、功能需求、设计要求等多种因素影响。...
便利店微信下单小程序指南 在数字化时代,便利店构建微信下单小程序,能为顾客提供便捷购物体验,拓展业务。那么,便...