更新记录
1.0.0(2021-01-07)
摸鱼一天写的bug.....有问题再修
平台兼容性
HbuilderX/cli最低兼容版本 |
---|
2.6.11 |
uni-app
app-vue | app-nvue | app-android | app-ios |
---|---|---|---|
? | ? | ? | ? |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
? | ? | ? | ? | ? | ? | ? | ? | ? |
微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | 钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|---|---|---|---|---|
? | ? | ? | ? | ? | ? | ? | ? | ? |
快应用-华为 | 快应用-联盟 |
---|---|
? | ? |
uni-app x
app-android | app-ios |
---|---|
? | ? |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
? | ? | ? | ? | ? | ? | ? | ? | ? |
已实现
- 正常手势操作
- 方法开关
- 显示/隐藏比例自动吸附
- 动画
- 独立滑动
- .....编不出来了 自行测试吧
使用说明
和正常组件使用方式一样
// 1.引入 import exDrawer from '@/components/ex-drawer/ex-drawer.vue' // 2.挂载 components:{ exDrawer }
// 3.使用 <ex-drawer ref='drawer' width="488"> <view class="drawer" slot="drawerContent"> <button @click="close" type="default">关闭</button> drawer </view> <view class="container" slot="containerContent"> <button @click="open" type="default">打开</button> <view class="" v-for="(item,index) in 100" :key="index"> {{item}} </view> </view> </ex-drawer>
具体请查看demo
props
- width(string) // 抽屉宽度
- 没了 主容器宽高和抽屉高度都可以被自动撑开 自行设置即可
插槽
- drawerContent // 抽屉插槽
- containerContent // 主容器插槽
方法
- this.$refs.drawer.open() //打开
- this.$refs.drawer.colse() //关闭
之后预计更新
- 自定义进出吸附比例
-
看需求....
<template> <view> <ex-drawer ref='drawer' width="488"> <view class="drawer" slot="drawerContent"> <button @click="close" type="default">关闭</button> drawer </view> <view class="container" slot="containerContent"> <button @click="open" type="default">打开</button> <view class="" v-for="(item,index) in 100" :key="index"> {{item}} </view> </view> </ex-drawer> </view> </template>
<script> import exDrawer from '@/components/ex-drawer/ex-drawer.vue' export default { data() { return { } }, components:{ exDrawer }, methods: { open(){ this.$refs.drawer.open() }, close(){ this.$refs.drawer.close() } } } </script>
<style> .drawer{ background-color: #ffffff; height: 100vh; } .container{ background-color: #19BE6B; width: 750rpx; } </style>