uniapp 写微信小程序悬浮按钮随着滑动窗口显示隐藏

327 阅读1分钟

显示时 image.png

隐藏时 image.png

```	<view class="column popupfx" :class="specClass">
			<u-button @click="goCleanRecords()" type="primary">保洁记录</u-button>
		</view>



```js
		data() {
			return {
				specClass: 'hide'
			}
		},
                handletouchstart() {
				this.specClass = 'show';
			},
                handletouchend() {
				this.specClass = 'hide';
			},

                
		//查看保洁记录按钮
		.popupfx {
			position: fixed;
			top: 80%;
			right: 20rpx;
			z-index: 10;

			&.show {
				animation: showLayer 0.2s linear both;
			}

			&.hide {
				animation: hideLayer 0.2s linear both;
			}

			@keyframes showLayer {
				0% {
					transform: translateX(0%);
				}

				100% {
					transform: translateX(100%); //这里可以通过变大变小调整偏移量
				}
			}

			@keyframes hideLayer {
				0% {
					transform: translateX(100%);
				}

				100% {
					transform: translateX(0);
				}
			}
		}