<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>页面效果：可以实现拖动，点击跳转
文章来源：https://www.toymoban.com/news/detail-777878.html
文章来源地址https://www.toymoban.com/news/detail-777878.html
到了这里，关于uniapp微信小程序全局所有页面放置一个跳转首页的可以拖动的悬浮按钮的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
