更新记录

1.0.0（2024-01-09） 下载此版本

1.0.0 插件发布

平台兼容性

uni-app

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
√ √ - - √ - - - -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
- - - - - - - - - - -

options参数配置

参数 说明 类型 默认值
id 唯一id String levitated-sphere
width 主图宽度 Number 70
height 主图高度 Number 70
url 主图地址 String /static/logo.png
radius 小图距离大图间距 Number 60
moveSpeed 贴边速度 Number 5
firstTop 首次进来主图所在位置高度 Number 200
degree 角度间距 Number 40
startDegree 首个小图所在位置角度 Number 60
item 小图配置项,具体看下方item Array -

item 参数配置

参数 说明 类型 默认值
id 唯一 String -
url 小图图片地址 String -
width 小图宽度 Number -
height 小图高度 Number -
click 小图点击事件 Function -

event

参数 说明 返回值
show 打开悬浮球 -
hide 关闭悬浮球 -

使用

在app.vue中配置,如果在其他页面中进行配置的话,可能会导致每次进入该页面都会注册一个新的悬浮球

1. 全局通用

如果不需要个别页面隐藏的话,可以直接使用下面方法

1.1 vue2

<script>
// app.vue
    import GlobalLevitatedSphere from '@/uni_modules/qjp-GlobalLevitatedSphere/js_sdk/qjp-GlobalLevitatedSphere.js';
    const options ={
            width:100,
            height:100,
            url:'/static/11.png',
            radius:100,
            moveSpeed:5,
            id:'circleWrap',
            item:[
                {
                    url:'/static/22.png',
                    id:'item1',
                    width:50,
                    height:50,
                    click:()=>{
                        uni.showToast({
                            title: 'item1'
                        })
                    }
                },
                {
                    url:'/static/33.png',
                    id:'item2',
                    width:50,
                    height:50,
                    click:()=>{
                        uni.showToast({
                            title: 'item2'
                        })
                    }
                },
                {
                    url:'/static/44.png',
                    id:'item3',
                    width:50,
                    height:50,
                    click:()=>{
                        uni.showToast({
                            title: 'item3'
                        })
                    }
                },
                {
                    url:'/static/55.png',
                    id:'item4',
                    width:50,
                    height:50,
                    click:()=>{
                        uni.showToast({
                            title: 'item4'
                        })
                    }
                }
            ]
        }
    export default {
        onLaunch:function(){
            new GlobalLevitatedSphere(options)
        },
        created() {

        },
        methods: {

        }
    }

</script>

1.2 vue3

<script setup>
// app.vue
    import GlobalLevitatedSphere from '@/uni_modules/qjp-GlobalLevitatedSphere/js_sdk/qjp-GlobalLevitatedSphere.js';
    import { onLaunch, onShow, onHide } from '@dcloudio/uni-app';
    onLaunch(() => {
     new GlobalLevitatedSphere(options)
    });
         const options ={
            width:100,
            height:100,
            url:'/static/11.png',
            radius:100,
            moveSpeed:5,
            id:'circleWrap',
            item:[
                {
                    url:'/static/22.png',
                    id:'item1',
                    width:50,
                    height:50,
                    click:()=>{
                        uni.showToast({
                            title: 'item1'
                        })
                    }
                },
                {
                    url:'/static/33.png',
                    id:'item2',
                    width:50,
                    height:50,
                    click:()=>{
                        uni.showToast({
                            title: 'item2'
                        })
                    }
                },
                {
                    url:'/static/44.png',
                    id:'item3',
                    width:50,
                    height:50,
                    click:()=>{
                        uni.showToast({
                            title: 'item3'
                        })
                    }
                },
                {
                    url:'/static/55.png',
                    id:'item4',
                    width:50,
                    height:50,
                    click:()=>{
                        uni.showToast({
                            title: 'item4'
                        })
                    }
                }
            ]
};
</script>

2. 个别页面隐藏

vue2的话建议使用VueX

2.1 vue2

2.1.1 在vuex中使用

// globalLevitatedSphereStore.js
  import GlobalLevitatedSphere from '@/uni_modules/qjp-GlobalLevitatedSphere/js_sdk/qjp-GlobalLevitatedSphere.js';
const globalLevitatedSphereStore = {
    state: {
        levitatedSphereCtx: null,
    },
    getters: {
        levitatedSphereCcontext(state) {
            return state.levitatedSphereCtx
        }
    },
    mutations: {
        INIT_LEVITATED_SPHERE_CTX(state) {
            const options = {} // 配置项,可以查看上面全局通用案例配置项
            state.levitatedSphereCtx = new GlobalLevitatedSphere(options)
        }
    },
    actions: {
        init_levitated_sphere({
            commit
        }) {
            commit('INIT_LEVITATED_SPHERE_CTX')
        },

    }
}
export default globalLevitatedSphereStore

2.1.2 app.vue中使用

<script>
// app.vue
import { mapActions, mapGetters,mapState,mapMutations } from 'vuex';
    export default {
        onLaunch:function(){
            this.init_levitated_sphere()
        },
        created() {

        },
        methods: {
            ...mapActions([
                'init_levitated_sphere'
            ])
        }
    }

</script>

2.1.3 路由拦截

// uni.promisify.adaptor.js
import store from '@/store/modules/globalLevitatedSphereStore.js'
const white = ['/pages/login/login','/pages/register/register' ]
uni.addInterceptor("navigateTo", {
    invoke(e) {
        if (white.includes(e.url)) {
            store.state.levitatedSphereCtx.hide()
        } else {
            store.state.levitatedSphereCtx.show()
        }
    },
    success(e) {
         console.log('路由拦截e',e)
    },
});
uni.addInterceptor("switchTab", {
    invoke(e) {
        if (white.includes(e.url)) {
            store.state.levitatedSphereCtx.hide()
        } else {
            store.state.levitatedSphereCtx.show()
        }
    },
    success(e) {
         console.log('路由拦截e',e)
    },
});

2.2 vue3

2.2.1 在pinia中使用

// globalLevitatedSphereStore.js
import { defineStore } from 'pinia'
  import GlobalLevitatedSphere from '@/uni_modules/qjp-GlobalLevitatedSphere/js_sdk/qjp-GlobalLevitatedSphere.js';
 const useGlobalLevitatedSphereStoreStore = defineStore('globalLevitatedSphere', {
    state: () =>{
        return {
            levitatedSphereCtx:null
        }
    },
    getters:{
        levitatedSphereCcontext(state) {
            return state.levitatedSphereCtx
        }
    },
    actions: {
        init_levitated_sphere() {
            const options = {}  // 配置项,可以查看上面全局通用案例配置项
            this.levitatedSphereCtx =  new GlobalLevitatedSphere(options)
        }
    }
})
export default useGlobalLevitatedSphereStoreStore

2.2.2 app.vue中使用

<script setup>
// app.vue
    import { onLaunch, onShow, onHide } from '@dcloudio/uni-app';
    import useGlobalLevitatedSphereStoreStore from '@/store/modules/globalLevitatedSphereStore.js'
    onLaunch(() => {
        useGlobalLevitatedSphereStoreStore().init_levitated_sphere()
    });
};
</script>

2.2.3 路由拦截

// uni.promisify.adaptor.js
import useGlobalLevitatedSphereStoreStore from '@/store/modules/globalLevitatedSphereStore.js'
import { storeToRefs } from 'pinia';
const globalLevitatedSphere = useGlobalLevitatedSphereStoreStore()
const { levitatedSphereCcontext } = storeToRefs(globalLevitatedSphere);
const white = ['/pages/login/login','/pages/register/register' ]
uni.addInterceptor("navigateTo", {
    invoke(e) {
        if (white.includes(e.url)) {
            levitatedSphereCcontext.value.hide()
        } else {
            levitatedSphereCcontext.value.show()
        }
    },
    success(e) {
         console.log('路由拦截e',e)
    },
});
uni.addInterceptor("switchTab", {
    invoke(e) {
        if (white.includes(e.url)) {
            levitatedSphereCcontext.value.hide()
        } else {
            levitatedSphereCcontext.value.show()
        }
    },
    success(e) {
         console.log('路由拦截e',e)
    },
});

单个悬浮球

单个悬浮球 https://ext.dcloud.net.cn/plugin?id=16026

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...