uniapp 全局浮动的组件。

一个组件在每个页面都显示，浮动在app页面上。

通过plus.nativeObj.View可以实现这个效果。可实现拖动效果。拖到底部删除。

详情看官网。https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.View

music.js 全局显示的组件uni.getSystemInfo({    success: (info) => {

//初始化存一些设备相关的参数
        console.log(info.screenHeight)
        try {
            uni.setStorageSync('screenHeight', info.screenHeight);
            uni.setStorageSync('screenWidth', info.screenWidth);
        } catch (e) {
            // error
        }
    }
})

//b：设计稿相对于真机的比例

let b = uni.getStorageSync('screenWidth') / 390 function createMusic(state, AudioName) { state.music.gp = new plus.nativeObj.View('gp', { width: 58 * b + 'px', height: 58 * b + 'px', left: 15 * b + 'px', top: 681 * b + 'px' }, [{ tag: 'rect', position: { width: 58 * b + 'px', height: 58 * b + 'px', }, rectStyles: { radius: 29 * b + 'px', color: '#000' } }, { tag: 'rect', position: { width: 18 * b + 'px', height: 18 * b + 'px', top: 20 * b + 'px', left: 20 * b + 'px', }, rectStyles: { radius: 9 * b + 'px', color: '#FFB000' } }, { tag: 'rect', position: { width: 4 * b + 'px', height: 4 * b + 'px', top: 27 * b + 'px', left: 27 * b + 'px' }, rectStyles: { radius: 2 * b + 'px', color: '#000' } }]) let title = 'T' + AudioName.split('-')[0] + '-CG' + AudioName.split('-')[1] state.music.content = new plus.nativeObj.View('content', { width: 148 * b + 'px', height: 44 * b + 'px', left: 44 * b + 'px', top: 688 * b + 'px' }, [{ tag: 'rect', position: { width: 148 * b + 'px', height: 44 * b + 'px', }, rectStyles: { radius: 22 * b + 'px', color: '#fff' } }, { tag: 'font', text: title, position: { height: 20 * b + 'px', top: 4.5 * b + 'px', }, textStyles: { color: '#404040', size: 14 * b + 'px', weight: '500' } }, { tag: 'font', text: '语法&单词', position: { height: 15 * b + 'px', top: 24.5 * b + 'px', }, textStyles: { color: 'rgba(64, 64, 64, 0.5)', size: 11 * b + 'px', weight: '400' } }, { tag: 'rect', position: { width: 34 * b + 'px', height: 34 * b + 'px', top: 5 * b + 'px', left: 109 * b + 'px' }, rectStyles: { radius: 17 * b + 'px', // color: '#FFB000'  } }]) state.music.play = new plus.nativeObj.View('play', { width: 38 * b + 'px', height: 38 * b + 'px', left: 151 * b + 'px', top: 691 * b + 'px' }, [{ tag: 'img', position: { width: 38 * b + 'px', height: 38 * b + 'px', }, src: './static/image/common/play.png', }]) state.music.pause = new plus.nativeObj.View('play', { width: 38 * b + 'px', height: 38 * b + 'px', left: 151 * b + 'px', top: 691 * b + 'px' }, [{ tag: 'img', position: { width: 38 * b + 'px', height: 38 * b + 'px', }, src: './static/image/common/pause.png', }]) state.music.delete = new plus.nativeObj.View('delete', { width: '100%', height: 94 * b + 'px', bottom: '0px', }, [{ tag: 'rect', position: { width: '100%', height: 94 * b + 'px', }, rectStyles: { color: 'rgba(254, 91, 69, 1)', } },{ tag: 'img', src: './static/image/common/delete.png', position: { width: 32*b+'px', height: 32*b+'px', left: 179*b+'px', top: 31*b+'px' } }]) // 拖动，动态渲染组件 state.music.gp.addEventListener('touchmove', e => { state.music.gp.setStyle({ width: 58 * b + 'px', height: 58 * b + 'px', left: e.pageX - (29 * b) + 'px', top: e.pageY - (29 * b) + 'px' }) state.music.content.setStyle({ width: 148 * b + 'px', height: 44 * b + 'px', left: e.pageX + 'px', top: e.pageY - (22 * b) + 'px' }) state.music.pause.setStyle({ width: 38 * b + 'px', height: 38 * b + 'px', left: e.pageX + (107 * b) + 'px', top: e.pageY - (19 * b) + 'px' }) state.music.play.setStyle({ width: 38 * b + 'px', height: 38 * b + 'px', left: e.pageX + (107 * b) + 'px', top: e.pageY - (19 * b) + 'px' }) }) // 拖动开始 state.music.gp.addEventListener('touchstart', _ => { // 显示删除区域 state.music.delete.show() }) state.music.gp.addEventListener('touchcancel',_=>{ console.log('touchcancel') }) // 拖动结束 state.music.gp.addEventListener('touchend', e => { // 隐藏删除区域 console.log('拖动结束') state.music.delete.hide() // 拖到删除区域 if((uni.getStorageSync('screenHeight') - e.screenY) < (94 * b)) { // 销毁音频  state.music.audio.destroy() console.log(state.music.audio) // 隐藏音频控件  state.music.gp.hide() state.music.content.hide() state.music.play.hide() state.music.pause.hide() // 初始化音频控件的位置  state.music.gp.setStyle({ width: 58 * b + 'px', height: 58 * b + 'px', left: 15 * b + 'px', top: 681 * b + 'px' }) state.music.content.setStyle({ width: 148 * b + 'px', height: 44 * b + 'px', left: 44 * b + 'px', top: 688 * b + 'px' }) state.music.pause.setStyle({ width: 38 * b + 'px', height: 38 * b + 'px', left: 151 * b + 'px', top: 691 * b + 'px' }) state.music.play.setStyle({ width: 38 * b + 'px', height: 38 * b + 'px', left: 151 * b + 'px', top: 691 * b + 'px' }) } }) state.music.play.addEventListener('click', _ => { state.music.audio.play() state.music.pause.show() state.music.play.hide() }) state.music.pause.addEventListener('click', _ => { state.music.audio.pause() state.music.play.show() state.music.pause.hide() }) } export default createMusic

 

通过vuex控制组件的显示与隐藏，

store/index.js

// 引入music.js
import createMusic from '/nativeObj/music/music.js'

state: {
        music: {
            gp: null,
            content: null,
            play: null,
            pause: null,
            delete: null,
            audio: null,
        }
    },
mutations: {
		// 显示音乐控件
		showMusic(state, AudioName) {
			if (!state.music.gp) {
				createMusic(state, AudioName)
				console.log('emm')
			}
			state.music.delete.show()
			state.music.content.show()
			state.music.gp.show()
			state.music.pause.show()
			state.music.delete.hide()
		},
		// 隐藏按钮
		hideMusic(state) {
			state.music.gp && state.music.gp.hide()
			state.music.content && state.music.content.hide()
			state.music.play && state.music.play.hide()
			state.music.pause && state.music.pause.hide()
		},
		saveMusic(state, audio) {
			state.music.audio = audio
		}
	},

在vue中调用

this.$store.commit('showMusic', AudioName)
this.$store.commit('saveMusic', innerAudioContext)

 

uni.getSystemInfo({success: (info) => {//初始化存一些设备相关的参数console.log(info.screenHeight)try {uni.setStorageSync('screenHeight', info.screenHeight);uni.setStorageSync('screenWidth', info.screenWidth);} catch (e) {// error}}})
let b = uni.getStorageSync('screenWidth') / 390function createMusic(state, AudioName) {state.music.gp = new plus.nativeObj.View('gp', {width: 58 * b + 'px',height: 58 * b + 'px',left: 15 * b + 'px',top: 681 * b + 'px'}, [{tag: 'rect',position: {width: 58 * b + 'px',height: 58 * b + 'px',},rectStyles: {radius: 29 * b + 'px',color: '#000'}}, {tag: 'rect',position: {width: 18 * b + 'px',height: 18 * b + 'px',top: 20 * b + 'px',left: 20 * b + 'px',},rectStyles: {radius: 9 * b + 'px',color: '#FFB000'}}, {tag: 'rect',position: {width: 4 * b + 'px',height: 4 * b + 'px',top: 27 * b + 'px',left: 27 * b + 'px'},rectStyles: {radius: 2 * b + 'px',color: '#000'}}])let title = 'T' + AudioName.split('-')[0] + '-CG' + AudioName.split('-')[1]state.music.content = new plus.nativeObj.View('content', {width: 148 * b + 'px',height: 44 * b + 'px',left: 44 * b + 'px',top: 688 * b + 'px'}, [{tag: 'rect',position: {width: 148 * b + 'px',height: 44 * b + 'px',},rectStyles: {radius: 22 * b + 'px',color: '#fff'}}, {tag: 'font',text: title,position: {height: 20 * b + 'px',top: 4.5 * b + 'px',},textStyles: {color: '#404040',size: 14 * b + 'px',weight: '500'}}, {tag: 'font',text: '语法&单词',position: {height: 15 * b + 'px',top: 24.5 * b + 'px',},textStyles: {color: 'rgba(64, 64, 64, 0.5)',size: 11 * b + 'px',weight: '400'}}, {tag: 'rect',position: {width: 34 * b + 'px',height: 34 * b + 'px',top: 5 * b + 'px',left: 109 * b + 'px'},rectStyles: {radius: 17 * b + 'px',// color: '#FFB000'}}])state.music.play = new plus.nativeObj.View('play', {width: 38 * b + 'px',height: 38 * b + 'px',left: 151 * b + 'px',top: 691 * b + 'px'}, [{tag: 'img',position: {width: 38 * b + 'px',height: 38 * b + 'px',},src: './static/image/common/play.png',}])state.music.pause = new plus.nativeObj.View('play', {width: 38 * b + 'px',height: 38 * b + 'px',left: 151 * b + 'px',top: 691 * b + 'px'}, [{tag: 'img',position: {width: 38 * b + 'px',height: 38 * b + 'px',},src: './static/image/common/pause.png',}])state.music.delete = new plus.nativeObj.View('delete', {width: '100%',height: 94 * b + 'px',bottom: '0px',}, [{tag: 'rect',position: {width: '100%',height: 94 * b + 'px',},rectStyles: {color: 'rgba(254, 91, 69, 1)',}},{tag: 'img',src: './static/image/common/delete.png',position: {width: 32*b+'px',height: 32*b+'px',left: 179*b+'px',top: 31*b+'px'}}])// 拖动，动态渲染组件state.music.gp.addEventListener('touchmove', e => {state.music.gp.setStyle({width: 58 * b + 'px',height: 58 * b + 'px',left: e.pageX - (29 * b) + 'px',top: e.pageY - (29 * b) + 'px'})state.music.content.setStyle({width: 148 * b + 'px',height: 44 * b + 'px',left: e.pageX + 'px',top: e.pageY - (22 * b) + 'px'})state.music.pause.setStyle({width: 38 * b + 'px',height: 38 * b + 'px',left: e.pageX + (107 * b) + 'px',top: e.pageY - (19 * b) + 'px'})state.music.play.setStyle({width: 38 * b + 'px',height: 38 * b + 'px',left: e.pageX + (107 * b) + 'px',top: e.pageY - (19 * b) + 'px'})})// 拖动开始state.music.gp.addEventListener('touchstart', _ => {// 显示删除区域state.music.delete.show()})state.music.gp.addEventListener('touchcancel',_=>{console.log('touchcancel')})// 拖动结束state.music.gp.addEventListener('touchend', e => {// 隐藏删除区域console.log('拖动结束')state.music.delete.hide()// 拖到删除区域if((uni.getStorageSync('screenHeight') - e.screenY) < (94 * b)) {// 销毁音频state.music.audio.destroy()console.log(state.music.audio)// 隐藏音频控件state.music.gp.hide()state.music.content.hide()state.music.play.hide()state.music.pause.hide()// 初始化音频控件的位置state.music.gp.setStyle({width: 58 * b + 'px',height: 58 * b + 'px',left: 15 * b + 'px',top: 681 * b + 'px'})state.music.content.setStyle({width: 148 * b + 'px',height: 44 * b + 'px',left: 44 * b + 'px',top: 688 * b + 'px'})state.music.pause.setStyle({width: 38 * b + 'px',height: 38 * b + 'px',left: 151 * b + 'px',top: 691 * b + 'px'})state.music.play.setStyle({width: 38 * b + 'px',height: 38 * b + 'px',left: 151 * b + 'px',top: 691 * b + 'px'})}})state.music.play.addEventListener('click', _ => {state.music.audio.play()state.music.pause.show()state.music.play.hide()})state.music.pause.addEventListener('click', _ => {state.music.audio.pause()state.music.play.show()state.music.pause.hide()})}export default createMusic