mjz update
This commit is contained in:
mjz
@@ -5,10 +5,189 @@ permalink: /pages/plugin/drawer
|
||||
article: false
|
||||
---
|
||||
|
||||
## 操作条
|
||||
## 全屏抽屉
|
||||
|
||||
1. 全屏抽屉效果主要分为三个部分，主要有三个类名
|
||||
|
||||
2. 第一个类名 `DrawerPage`，就是第一张图总体外部包裹的类名
|
||||
|
||||
3. 第二个类名 `DrawerClose`，用来包裹打开抽屉之后关闭部分
|
||||
|
||||
4. 第三个类名 `DrawerWindow`，就是打开的抽屉部分了
|
||||
|
||||
::: details 点此查看页面源代码
|
||||
页面位置：`/pages/plugin/drawer`
|
||||
```vue
|
||||
```
|
||||
:::
|
||||
<template>
|
||||
<view class="bg-gradual-blue">
|
||||
// 全屏主体页面
|
||||
<scroll-view scroll-y class="DrawerPage" :class="modalName=='viewModal'?'show':''">
|
||||
<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block>
|
||||
<block slot="content">全屏抽屉</block>
|
||||
</cu-custom>
|
||||
<view class='padding margin text-center'>
|
||||
<view class='cu-btn bg-green lg block shadow radius margin-xl' @tap="showModal" data-target="viewModal">
|
||||
打开抽屉
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg">
|
||||
<view class="cu-item arrow" v-for="(item,index) in 20" :key="index">
|
||||
<view class="content">
|
||||
<text class="cuIcon-github text-grey"></text>
|
||||
<text class="text-grey">{{index +1}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='padding margin text-center'>
|
||||
<view class='cu-btn bg-green lg block shadow radius margin-xl' @tap="showModal" data-target="viewModal">
|
||||
打开抽屉
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
// 关闭部分
|
||||
<view class="DrawerClose" :class="modalName=='viewModal'?'show':''" @tap="hideModal">
|
||||
<text class="cuIcon-pullright"></text>
|
||||
</view>
|
||||
// 抽屉部分
|
||||
<scroll-view scroll-y class="DrawerWindow" :class="modalName=='viewModal'?'show':''">
|
||||
<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg">
|
||||
<view class="cu-item arrow" v-for="(item,index) in 20" :key="index">
|
||||
<view class="content">
|
||||
<text class="cuIcon-github text-grey"></text>
|
||||
<text class="text-grey">{{index +1}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
modalName:null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
showModal(e) {
|
||||
console.log(e)
|
||||
this.modalName = e.currentTarget.dataset.target
|
||||
},
|
||||
hideModal(e) {
|
||||
this.modalName = null
|
||||
},
|
||||
// 这个函数没用到，我也不知道为什么源码作者写了
|
||||
tabSelect(e) {
|
||||
this.TabCur = e.currentTarget.dataset.id;
|
||||
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-image: var(--gradualBlue);
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.DrawerPage {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
left: 0vw;
|
||||
background-color: #f1f1f1;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
|
||||
.DrawerPage.show {
|
||||
transform: scale(0.9, 0.9);
|
||||
left: 85vw;
|
||||
box-shadow: 0 0 60upx rgba(0, 0, 0, 0.2);
|
||||
transform-origin: 0;
|
||||
}
|
||||
|
||||
.DrawerWindow {
|
||||
position: absolute;
|
||||
width: 85vw;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: scale(0.9, 0.9) translateX(-100%);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: all 0.4s;
|
||||
padding: 100upx 0;
|
||||
}
|
||||
|
||||
.DrawerWindow.show {
|
||||
transform: scale(1, 1) translateX(0%);
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.DrawerClose {
|
||||
position: absolute;
|
||||
width: 40vw;
|
||||
height: 100vh;
|
||||
right: 0;
|
||||
top: 0;
|
||||
color: transparent;
|
||||
padding-bottom: 30upx;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));
|
||||
letter-spacing: 5px;
|
||||
font-size: 50upx;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
|
||||
.DrawerClose.show {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
width: 15vw;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.DrawerPage .cu-bar.tabbar .action button.cuIcon {
|
||||
width: 64upx;
|
||||
height: 64upx;
|
||||
line-height: 64upx;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.DrawerPage .cu-bar.tabbar .action .cu-avatar {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.DrawerPage .nav {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.DrawerPage .nav .cu-item.cur {
|
||||
border-bottom: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.DrawerPage .nav .cu-item.cur::after {
|
||||
content: "";
|
||||
width: 10upx;
|
||||
height: 10upx;
|
||||
background-color: currentColor;
|
||||
position: absolute;
|
||||
bottom: 10upx;
|
||||
border-radius: 10upx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.DrawerPage .cu-bar.tabbar .action {
|
||||
flex: initial;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
Reference in New Issue
Block a user