<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>页面效果：可以实现拖动，点击跳转
