uniapp侧边浮动收缩按钮

1、引入子组件

<template><view><view :animation="animationDataContent" class="animationContent" :style="{'background-color': bgColor }" @click="rotateAndScaleThenTranslate"><label class="wm-icon wm-icon-gengduo1 moreIcon" v-if="moreFlag" :style="{'color': fontColor }"></label><view :animation="animationData" @tap="clickAdd" class="bottom-float" :style="{'background-color': bgColor }"><label class="wm-icon wm-icon-add addIcon" :style="{'color': fontColor }"></label></view></view></view>
</template><script>/*** wm-list-add 带状态的提交按钮* @description 一个动效的侧面添加按钮，适用于list场景，避免遮挡用户视线。* @property {String} bgColor 背景颜色（默认：#5094f2）* @property {String} fontColor 文字颜色（默认：#ffffff）* @property {Boolean} isOpen 默认是否关闭动画（默认：否）* @example* <wm-list-add ref="add"/>*/export default {name: 'wm-list-add',props: {// 背景颜色bgColor: {type: String,default: '#5094f2'},// 文字颜色fontColor: {type: String,default: '#ffffff'},// 是否关闭动画isOpen: {type: Boolean,default: false},//列表滑动关闭动画isClose:{type: Boolean,default: false}},created() {this.init()},data() {return {animationData: {},animationDataContent: {},moreFlag: false,}},methods: {init() {if (!this.isOpen) {this.closeAnimation()}},clickAdd() {this.$emit('clickAdd');},// 关闭右侧添加closeAnimation() {if (this.moreFlag) returnconst animation1 = uni.createAnimation({duration: 500,timingFunction: 'ease',})const animation = uni.createAnimation({duration: 1000,timingFunction: 'ease',})this.animationDataContent = animation1this.animation = animationanimation1.scale(1, 1).rotate(0).step()animation.scale(1, 1).rotate(90).step()this.animationData = animation.export()this.animationDataContent = animation1.export()setTimeout(function() {animation1.translate(42).step()animation.translate(0, -42).step()this.animationData = animation.export()this.animationDataContent = animation1.export()this.moreFlag = true}.bind(this), 1000)},// 打开右侧添加rotateAndScaleThenTranslate() {var animation1 = uni.createAnimation({duration: 500,timingFunction: 'ease',})this.animation1 = animation1// 先旋转，然后平移this.animation1.rotate(0).scale(1, 1).step()this.animation1.translate(0).step()this.animationDataContent = this.animation1.export()var animation = uni.createAnimation({duration: 1000,timingFunction: 'ease',})this.animation = animation// 先旋转，然后平移this.animation.rotate(-90).scale(1, 1).step()this.animation.translate(0, 0).step()this.animationData = this.animation.export()this.moreFlag = false// 5秒自动收回setTimeout(() => {this.closeAnimation()}, 5000)},}}
</script><style>@import url("./css/wm-icon.css");.animationContent {position: fixed;width: 130rpx;/* background-color: #5094f2; */height: 100rpx;bottom: 300rpx;right: 0;z-index: 10;border-radius: 50rpx 0 0 50rpx;}.bottom-float {position: absolute;left: 0;top: 0;width: 100rpx;height: 100rpx;border-radius: 50rpx;display: flex;align-items: center;justify-content: center;/* background-color: #5094f2; */box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.1);transition: transform 0.4s;transform: translateX(0) rotate(0deg);color: #FFFFFF;}.moreIcon {position: absolute;line-height: 100rpx;left: 8rpx;top: 0;font-size: 40rpx;}.addIcon {font-size: 66rpx;}
</style>

2、引入子组件wm-icon.css文件

@font-face {font-family: "wm-icon";src: url('//at.alicdn.com/t/font_2366056_hdrm0876p4j.eot?t=1612429272174'); /* IE9 */src: url('//at.alicdn.com/t/font_2366056_hdrm0876p4j.eot?t=1612429272174#iefix') format('embedded-opentype'), /* IE6-IE8 */url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALIAAsAAAAABqAAAAJ5AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBFIEXATYCJAMMCwgABCAFhGEHOBvTBcguMRUZ6fQkkDYTIZjWnPn8Dxy4PVEEX3tx++4urVUdl4yvVSU0j9AogtEIhVDd4tBdV/Uv52qPwIi9B0dEipJ203I66R65fydfo7KnHvNh2jyho6UToOY3C7DhPcbGWcr6Dhf//73TN/63b02cFyjHtZcu6iQcUGB7AkVWJAl5w9gFL/A5gUajhmR2do6uoKyw1wXimecIKBdSisKq9UJtw9EiHtSoTy/SJ7yMvh+/bEaZpCazt+7ebduw9tXlp8pwGSBpAjxdg4xloBDXjaVTOcF4OY2mfHdzrSKkpbJVRaQyDLXOHx5JELXszmYwj8qJrwVPlZmnoeapn8qgFgVzwCqb6ybOomFm89PPcjm8+YblrIxvUT3bmJujJTellupnjePGkVcafD3rO3K8g1TtholXtwD77u+5BajOnufWAcgL6UUgeBC9Hyz9LtcK+LLeK0pV5w0v10sw9S9TDxwphtZ256KpPJUVyYZOH0jArkZU7Finr+m2ntuqhDo9GU7sMM7sFC7sItRosgG16mxBoyWbp5t0ieVEacCiZwCh1Wuc2Dc4s29xYT9DjV7/UKvVf2h0HKUrm8zGXXXTkGCyUXbRs3Ss3CJX29Ew7LwgpxkKwzWh5IZM6mVwfGSsUt2lmMz0LWnLmWBWqIyOcAe8yBSGGhOjfbJ4xGVOFkZHVdObRiwdQdU2gwiM2JDUhTwWLaaCXlb1XGQYfu4CcTSFBNM8pKB8gxgpbzo0bsRYN941xUOGHuG2VItjAmMKUgzNQ2gHYjaErKShpHmRj1jYCHdCIbFg1BmnhppGtrVEf3YCGtn35kiRo6i/p9ixm3o8J2wbAAAAAA==') format('woff2'),url('//at.alicdn.com/t/font_2366056_hdrm0876p4j.woff?t=1612429272174') format('woff'),url('//at.alicdn.com/t/font_2366056_hdrm0876p4j.ttf?t=1612429272174') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url('//at.alicdn.com/t/font_2366056_hdrm0876p4j.svg?t=1612429272174#wm-icon') format('svg'); /* iOS 4.1- */
}.wm-icon {font-family: "wm-icon" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.wm-icon-gengduo1:before {content: "\e635";
}.wm-icon-add:before {content: "\e605";
}

3、父组调用

<template><wmListAdd ref="add" bgColor="red" @clickAdd="btnClick()" />
</template><script>import wmListAdd from '@/components/wm-list-add/wm-list-add.vue'export default {components: {wmListAdd}}
</script>

uniapp侧边浮动收缩按钮相关推荐

android 浮动小图标,android - 调整浮动动作按钮的图标大小（fab）
android - 调整浮动动作按钮的图标大小(fab) 新的浮动操作按钮应为56dp x 56dp,其中的图标应为24dp x 24dp. 所以图标和按钮之间的空间应该是16dp. android: ...
Android FloatingActionButton（浮动动作按钮的动画）使用详情
目录前言 1. Floating Action Button 2. 制作浮动操作按钮的菜单 2.1 显示浮动操作按钮菜单 2.2 隐藏浮动操作按钮菜单 3. 一个新的圆形动画 3.1 创建一个Act ...
ztree点击展开/收缩按钮分级加载，解决数据量过大加载缓慢
有些项目的组织机构足足有六七万多条数据,加载十分缓慢,所考虑做成分级加载. 由于本项目的ztree的树节点的点击事件已经被占用(加载组织人员),所以考虑使用ztree的展开/收缩 (onExpand ...
uni-app组件浮动动画
使用uni-app时,往往有增加动画效果的需求,这里提供一个在h5以及app端可以良好运行的组件浮动动画. /*** 设置一个浮动效果,需要给元素绑定:animation="upgradeA ...
uniapp点击删除按钮弹出（确定和取消提示）
例如点击改删除按钮 <view class="delete-icon" @click="detele"><image src=". ...
网页侧边浮动条的实现
我们看到的浮动条一直固定在浏览器的某个位置,这需要用到定位. position有相对定位relative,绝对定位absolut,而我们所用到的是相对浏览器定位 fix值. 而浮动栏里的背景图,需要一 ...
Uniapp自定义video播放按钮并结合swiper图片
淘宝中商品详情页都是视频和图片结合,我们这个demo实现的效果如下话不多说,直接上代码了先说html布局 <swiper :indicator-dots="dots" : ...
手机页面底部浮动的按钮
提交按钮 html <div id="footer"> <button>提交</button> </div> sass #foote ...
Android开发动态圆形浮动菜单按钮,Android编程：悬浮菜单按钮FloatingActionButton实例...
Android编程:悬浮菜单按钮FloatingActionButton实例环境: 主机:WIN10 开发环境:Android Studio 2.2 Preview 3 说明: 用第三方库Float ...

uniapp侧边浮动收缩按钮

uniapp侧边浮动收缩按钮相关推荐

最新文章

热门文章