<template>
	<view>
		<movable-area class="movable-area">
			<movable-view class="movable-view" :x="x" :y="y" direction="all">
                <view class="index" @tap="goToIndex">首页</view>
			</movable-view>
		</movable-area>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				x: 400,		//x坐标
				y: 400,		//y坐标
			}
		},
        methods:{
            goToIndex(){
                //跳转首页
                uni.switchTab({url:'/pages/index/index'})
            }
        }
	}
</script>
<style lang="scss">
.movable-area {
    //可以移动的范围
	height: 100vh;
	width: 750rpx;
	top: 0;
	position: fixed;
	pointer-events: none;//此处要加，鼠标事件可以渗透
	.movable-view {
        //按钮大小
		width:100rpx;
		height:100rpx;
		pointer-events: auto;//恢复鼠标事件
		.index{
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			background-color: #0a98ff;
			font-size: 16rpx;
			color: #fff;
			line-height: 50rpx;
			text-align: center;
		}
	}
}
</style>

把上面的静态解构放到src/components/movable/movable.vuewe文件作为自定义组件

此处用的到时uniapp的movable-area组件和内嵌movable-view组件，其中movable-area表示可拖动的范围，movable-view用于指示可拖动的区域。

参照文档：movable-area | uni-app官网     movable-view | uni-app官网

想要实现每个页面直接引用，无需一一注册，只需要把自定义的组src/min.js文件即可。步骤如下：

import Vue from 'vue'
import App from './App'
import store from "./store";

//1、引入封装好的组件
import movable from '@/components/movable/movable.vue'	
//2、全局注册组件
Vue.component('movable',movable)		




App.mpType = 'app'

const app = new Vue({
  store,
  ...App
})
app.$mount()

在需要使用的页面中，直接使用即可，不需要另外引入：

<template>
	<view class="codeLogin_containe">
        //直接使用组件	
        <movable/>
	</view>
</template>

页面效果：可以实现拖动，点击跳转