1.實(shí)現(xiàn)效果
菜單.gif
2.實(shí)現(xiàn)原理
- 定義一個(gè)菜單列表，圖標(biāo)，名稱枫攀，跳轉(zhuǎn)路由
menuList: [
{
name: '菜單一',
src: 'https://i.postimg.cc/Bn1XpkSn/susu.jpg',
url: ''
},
{
name: '菜單二',
src: 'https://i.postimg.cc/Gm7KjGmN/111.jpg',
url: ''
},
{
name: '菜單三',
src: 'https://i.postimg.cc/Bv28vfkg/222.webp',
url: ''
},
{
name: '菜單四',
src: 'https://i.postimg.cc/65STLQNc/333.webp',
url: ''
},
]
- wx:for數(shù)組括饶，為每一項(xiàng)設(shè)置內(nèi)聯(lián)樣式，當(dāng)菜單大于等同于4個(gè)時(shí)候来涨，每個(gè)菜單寬度25%图焰，超過100%，換行展示蹦掐，反之寬度為100/數(shù)組的長度技羔，居中顯示，動畫逐次延遲0.1s卧抗。如下圖所示藤滥。
style="width:{{menuList.length>=4?'25':100/menuList.length}}%;animation-delay: {{(index+1)*0.1}}s"
在這里插入圖片描述
在這里插入圖片描述
- 設(shè)置彈出動畫
@keyframes menuAwave {
0% {
opacity: 0;
transform: translateY(100%)
}
60% {
transform: translateY(-10%);
}
80% {
transform: translateY(10%);
}
100% {
opacity: 1;
transform: translateY(0%)
}
}
- 為mask背景層設(shè)置動畫，transform: scale設(shè)置縮放大小社裆。
3.實(shí)現(xiàn)代碼
<view class="maskBg {{mask_animation}}" catchtouchmove="preventdefault"></view>
<view class='menu-container' catchtouchmove="preventdefault" hidden='{{isShow}}'>
<view class='menu'>
<view class='menu-list'>
<view data-url="{{item.url}}" catchtap="toDetail" class='menu-item' wx:for='{{menuList}}' wx:key="menuList" style="width:{{menuList.length>=4?'25':100/menuList.length}}%;animation-delay: {{(index+1)*0.1}}s">
<image mode='aspectFill' src='{{item.src}}' class="menu-icon"></image>
<text class='menu-name'>{{item.name}}</text>
</view>
</view>
</view>
</view>
<view class="btn">
<view catchtap="click" class="btn-main {{btn_animation}}">+</view>
</view>
/* pages/effects/popMenu2/index.wxss */
.maskBg {
height: 48px;
width: 48px;
background-color: #ddacac;
opacity: 0.85;
z-index: 1000;
border-radius: 750rpx;
transform: scale(0);
position: fixed;
bottom: 0;
left: 50%;
margin-left: -24px;
}
.maskOpen {
animation: maskOpenAin 0.3s both;
}
.maskClose {
animation: maskCloseAin 0.4s both;
}
@keyframes maskOpenAin {
0% {
transform: scale(0);
}
75% {
transform: scale(24);
}
100% {
transform: scale(48);
}
}
@keyframes maskCloseAin {
0% {
transform: scale(48);
}
25% {
transform: scale(24);
}
100% {
transform: scale(0);
}
}
.btn {
width: 100%;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
z-index: 1005;
bottom: calc(10rpx + env(safe-area-inset-bottom));
}
.btn-main {
border-radius: 50%;
z-index: 1005;
height: 48px;
font-size: 28px;
width: 48px;
line-height: 48px;
text-align: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
color: #fff;
background: pink;
}
.menuOpen {
animation: menuOpenAni 0.3s both;
}
.menuClose {
animation: menuCloseAni 0.3s both;
}
@keyframes menuOpenAni {
0% {
transform: rotate(0deg);
color: #fff;
background: pink;
}
100% {
transform: rotate(45deg);
color: #000;
background: #fff;
}
}
@keyframes menuCloseAni {
0% {
transform: rotate(45deg);
color: #000;
background: #fff;
}
100% {
transform: rotate(-0deg);
color: #fff;
background: pink;
}
}
.menu-container {
position: fixed;
width: 100%;
z-index: 1002;
bottom: 0rpx;
}
.menu {
padding-bottom: calc(48px + 40rpx + env(safe-area-inset-bottom));
}
.menu-list {
display: flex;
align-items: center;
flex-wrap: wrap;
width: 100%;
padding-bottom: 15rpx;
}
.menu-item {
display: flex;
flex-direction: column;
align-items: center;
animation: menuAwave 0.45s linear both;
}
.menu-icon {
width: 110rpx;
height: 110rpx;
margin-bottom: 15rpx;
border-radius: 100%;
}
.menu-name {
color: #333;
font-size: 25rpx;
font-weight: bold;
margin-bottom: 10rpx;
}
@keyframes menuAwave {
0% {
opacity: 0;
transform: translateY(100%)
}
60% {
transform: translateY(-10%);
}
80% {
transform: translateY(10%);
}
100% {
opacity: 1;
transform: translateY(0%)
}
}
Page({
data: {
isShow: true,
menuList: [
{
name: '菜單一',
src: 'https://i.postimg.cc/Bn1XpkSn/susu.jpg',
url: ''
},
{
name: '菜單二',
src: 'https://i.postimg.cc/Gm7KjGmN/111.jpg',
url: ''
},
{
name: '菜單三',
src: 'https://i.postimg.cc/Bv28vfkg/222.webp',
url: ''
},
{
name: '菜單四',
src: 'https://i.postimg.cc/65STLQNc/333.webp',
url: ''
},
{
name: '菜單5',
src: 'https://i.postimg.cc/65STLQNc/333.webp',
url: ''
},
],
mask_animation: "",
btn_animation: ""
},
...
})
