uniapp floating window (floating ball, dynamic menu, displayed on top of other applications) Ba-FloatBall

Introduction ( download address )

Ba-FloatBall is a floating ball plugin displayed on top of other applications. Supports menu display, dragging, automatic margining, etc.; supports custom styles.

Support adding display menu, which can be customized (no menu is added, only the floating ball can be displayed)
Support custom floating window size
Support dragging and edge display
Support custom start position, save last position

screenshot display

insert image description here

Instructions

scriptIntroduce components in

	const floatBall = uni.requireNativePlugin('Ba-FloatBall')

scriptcalled in

		data() {
    
    
			return {
    
    
				ballSize: 0.12,
				menuSize: 0.5,
				menuItemSize: 0.1,
				ballIcon: "floatball_icon",
			}
		},
		methods: {
    
    
			initFW() {
    
    //初始化
				floatBall.init({
    
    
						ballSize: this.ballSize,//悬浮球大小
						menuSize: this.menuSize,//悬浮球菜单范围大小
						menuItemSize: this.menuItemSize,//菜单项大小
						ballIcon: this.ballIcon,//悬浮球图片
						ballMenus: [{
    
    
							icon: 'ic_weibo',//菜单项图片
							tag: 'weibo'//菜单项标识
						}, {
    
    
							icon: 'ic_weixin',
							tag: 'weixin'
						}, {
    
    
							icon: 'ic_email',
							tag: 'email'
						}, {
    
    
							icon: 'ic_qq',
							tag: 'qq'
						}, {
    
    
							icon: 'ic_weixin',
							tag: 'weixin'
						}]
					},
					(res) => {
    
    
						console.log(res);
						uni.showToast({
    
    
							title: res.msg,
							icon: "none",
							duration: 3000
						})
					});
			},
			showFW() {
    
    //展示
				floatBall.show((res) => {
    
    
					console.log(res);
					uni.showToast({
    
    
						title: res.msg,
						icon: "none",
						duration: 3000
					})
				});
			},
			hideFW() {
    
    //隐藏
				floatBall.hide(
					(res) => {
    
    
						console.log(res);
						uni.showToast({
    
    
							title: res.msg,
							icon: "none",
							duration: 3000
						})
					});
			},
		}

Hover Ball Style Settings

Note: After the resource configuration is changed, the base needs to be remade to take effect. It is recommended to configure it in advance.

Note that the image resource is in png format

Floating ball style : Floating ball icon setting, in the project's "nativeplugins\Ba-FloatBall\android\assets\baFloatBall" directory (create a new one if there is no one), add the "floatball_icon.png" image file. If it is another name, please pass the value in the ballIcon parameter of the init method, only set the name without the extension.
Customize the expanded menu : the icon path of the menu is the same as that of the floating ball, you can add pictures arbitrarily, and support multiple.

After adding resources, configure them in the ballMenus array parameter of the init method, as follows:

                ballMenus: [{
    
    
				    icon: 'ic_weibo',//菜单项图片
					tag: 'weibo'//菜单项标识
				}, {
    
    
					icon: 'ic_weixin',
					tag: 'weixin'
				}, {
    
    
					icon: 'ic_email',
					tag: 'email'
				}]

method list

name	illustrate
show	initialization
show	show
hide	hide

Listen for click events

Set the listener in the onLaunch event of App.vue in the application life cycle:

        onLaunch: function() {
    
    
			var globalEvent = uni.requireNativePlugin('globalEvent');
			globalEvent.addEventListener('baFloatBallEvent', function(e) {
    
    
				console.log('baFloatBallEvent：' + JSON.stringify(e));
				//这里写你的处理逻辑
				//点击哪一项，根据菜单设置的tag区分，悬浮球tag为“FloatBall”
			});
		},
		onShow: function() {
    
    
		},
		onHide: function() {
    
    
		}

init method parameters

Initialize the floating ball

attribute name	type	required	Defaults	illustrate
ballSize	Number	false	0.12	Set the size of the floating ball according to the screen width ratio
menuSize	Number	false	0.5	Set the size of the menu area according to the screen width ratio
menuItemSize	Number	false	0.1	Set the menu item size according to the screen width ratio
ballIcon	String	false	‘floatball_icon’	The name of the image resource of the floating ball, refer to 'Settings of the floating ball style'
ballMenus	Array	false		Floating ball menu configuration, multiple