更新记录

V1.0.0(2021-02-05)

V1.0.0 一个动效的侧面添加按钮,适用于list场景,避免遮挡用户视线。


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

说明

这是一个uniapp项目,基于Vue 2.0 动画效果,运行流畅! 通常用于列表页面以及需要隐藏展示按钮的页面等,它带有右侧按钮展出与收起的动画,既可以给用户一个友好的点击体验,又可以避免遮挡用户视线。

源码地址

GitHub地址:https://github.com/MichelleWangMX/wm-list-add

效果预览

用法示例

        <wm-list-add ref="add" @clickAdd="clickAdd"/>
    import wmListAdd from '@/components/wm-list-add/wm-list-add';
export default {
    components: {
            wmListAdd
    },
    methods: {
            clickAdd(){
                console.log('点击加号执行操作')
            }
}

组件参数

属性名 类型 默认值 说明
bgColor String #5094f2 默认背景颜色
font-color String #ffffff 文字颜色
isOpen Boolean false 默认是否关闭动画
clickAdd Function 加号点击后的回调

组件方法

方法名 说明 方法参数
init() 初始化按钮状态 此方法会将按钮初始化至点击前的状态
closeAnimation() 关闭右侧按钮 Function 此方法会关闭右侧按钮
rotateAndScaleThenTranslate() 展开右侧按钮 Function 此方法会展开右侧按钮

谢谢

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问