<template>
<view>
<movable-area class="movable-area">
<movable-view class="movable-view" :x="x" :y="y" direction="all">
<view class="index" @tap="goToIndex">首頁(yè)</view>
</movable-view>
</movable-area>
</view>
</template>
<script>
export default {
data() {
return {
x: 400, //x坐標(biāo)
y: 400, //y坐標(biāo)
}
},
methods:{
goToIndex(){
//跳轉(zhuǎn)首頁(yè)
uni.switchTab({url:'/pages/index/index'})
}
}
}
</script>
<style lang="scss">
.movable-area {
//可以移動(dòng)的范圍
height: 100vh;
width: 750rpx;
top: 0;
position: fixed;
pointer-events: none;//此處要加，鼠標(biāo)事件可以滲透
.movable-view {
//按鈕大小
width:100rpx;
height:100rpx;
pointer-events: auto;//恢復(fù)鼠標(biāo)事件
.index{
width: 50rpx;
height: 50rpx;
border-radius: 50%;
background-color: #0a98ff;
font-size: 16rpx;
color: #fff;
line-height: 50rpx;
text-align: center;
}
}
}
</style>把上面的靜態(tài)解構(gòu)放到src/components/movable/movable.vuewe文件作為自定義組件
此處用的到時(shí)uniapp的movable-area組件和內(nèi)嵌movable-view組件，其中movable-area表示可拖動(dòng)的范圍，movable-view用于指示可拖動(dòng)的區(qū)域。
參照文檔：movable-area | uni-app官網(wǎng)? ? ?movable-view | uni-app官網(wǎng)
想要實(shí)現(xiàn)每個(gè)頁(yè)面直接引用，無(wú)需一一注冊(cè)，只需要把自定義的組src/min.js文件即可。步驟如下：
import Vue from 'vue'
import App from './App'
import store from "./store";
//1、引入封裝好的組件
import movable from '@/components/movable/movable.vue'
//2、全局注冊(cè)組件
Vue.component('movable',movable)
App.mpType = 'app'
const app = new Vue({
store,
...App
})
app.$mount()在需要使用的頁(yè)面中，直接使用即可，不需要另外引入：
<template>
<view class="codeLogin_containe">
//直接使用組件
<movable/>
</view>
</template>頁(yè)面效果：可以實(shí)現(xiàn)拖動(dòng)，點(diǎn)擊跳轉(zhuǎn)
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-777878.html
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-777878.html
到了這里，關(guān)于uniapp微信小程序全局所有頁(yè)面放置一個(gè)跳轉(zhuǎn)首頁(yè)的可以拖動(dòng)的懸浮按鈕的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
