html页面引入公共页面，背景音乐，动态改变主题色

萧棠

于 2021-09-10 16:12:26 发布

阅读量592

点赞数

文章标签： html vue.js css

本文链接：https://blog.csdn.net/zhaowenxue/article/details/120222943

版权

本文介绍了一个使用Vue.js和jQuery构建的项目，该项目具有灵活的底部导航，解决iOS设备对iframe的兼容性问题。通过后端接口获取页面主题色，并在CSS中动态设置。同时，实现了背景音乐播放与暂停功能，但未实现音乐暂停后的续播。文章还提供了源码下载链接供读者参考。

摘要由CSDN通过智能技术生成

原生写一个灵活性很强的项目，后端通过生成二维码进入页面，可以用做公众号，项目引入vue.js和jq.js。
问题一：底部导航样式如下，在底部导航里面引入各个页面，同时解决ios不兼容iframe的问题
问题二：根据后端接口获取页面主题色
问题三：加入背景音乐并对音乐进行暂停（ps:暂时没有做到停止音乐后，再次打开后无法从停止的地方继续播放，只能重新播放）

所有问题在footnav.html页面中进行

解决问题一：
1，样式如下，跟app的底部导航一眼
在这里插入图片描述

2.单独创建footnav.html页面，在里面写样式，引入vue.js和jq.js,在data里写导航需要的东西

在这里插入图片描述
3.在页面的body中创建一个新的div标签，写在id为footnav的上面

<body>
	//引入页面
	<div class="bodymain"></div>
	//导航
	<div id="footnav">
		<div class="footnav">
			<div class="navlist" v-for="item in navList" :key="item.index" @click="clicknav(item)">
				<img v-if="current == item.index" class="listimg" :src="item.img">
				<img v-else class="listimg" :src="item.selectimg">
				<div class="listname"> {{item.name}} </div>
			</div>
		</div>
	</div>
	//音乐
	<div id="yinle" class="complaint" @click="ismusic = !ismusic">
		<div :class="ismusic ? 'rotation' : '' ">
			<i class="iconfont icon-yinle"></i>
		</div>
		<audio v-if="ismusic" id="audio" autoplay loop>
			<source :src="backmusic" type="audio/mpeg" />
		</audio>
	</div>
</body>

4.在methods中写方法initdata(),在mounted()中执行initdata方法
在这里插入图片描述

let url = that.navList[0].url;
let str = '\
<iframe width="100%" height="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" src="' + url + '"></iframe>\';
$(".bodymain").html(str);

5.点击导航进行跳转

clicknav(item) {
	let str = '\
	<iframe width="100%" height="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" src="' + item.url + '"></iframe>\';
	$(".bodymain").html(str);
},

6.这样就可以解决了页面引入的问题，同时解决ios不兼容iframe的问题

问题二：后端控制背景色，以上我们获取的背景色，下面在css中进行操作

7.在css中先给一个默认颜色

:root {
	--main-color: #AD1727;
}

8.然后在写jq方法赋值

$(function(){
	setTimeout(()=>{
		var color = rootVue.backcolor;
		document.documentElement.style.setProperty('--main-color', color);
		localStorage.setItem("backcolor",color);
	},300)
})

9.在其他主题色需要改变的地方进行使用，如背景色；其他页面直接使用，解决背景色问题

background-color: var(--main-color);

问题三，背景音乐，以上3和4中写了背景音乐的样式和获取了背景音乐，为什么做不到暂停继续播放是因为样式上的需求导致原生的audio标签不能添加控件，用了ismusic控制audio标签的显示和隐藏，如果是在页面中使用不考虑样式可以做到暂停继续播放

10.在每个页面都要出现音乐控件，所以在样式上z-index要给足；解决放在3里面的代码，点击直接控制ismusic = ！ismusic就行了，记得在data里面声明ismusic：true，因为刚进页面就要播放背景音乐

11.源码下载地址
https://download.csdn.net/download/zhaowenxue/22344866?spm=1001.2014.3001.5501

萧棠

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
html页面引入公共页面，背景音乐，动态改变主题色

原生写一个灵活性很强的项目，后端通过生成二维码进入页面，可以用做公众号，项目引入vue.js和jq.js。问题一：底部导航样式如下，在底部导航里面引入各个页面，同时解决ios不兼容iframe的问题问题二：根据后端接口获取页面主题色问题三：加入背景音乐并对音乐进行暂停（ps:暂时没有做到停止音乐后，再次打开后无法从停止的地方继续播放，只能重新播放）所有问题在footnav.html页面中进行解决问题一：1，样式如下，跟app的底部导航一眼2.单独创建footnav.html页面，在里面写样式
复制链接

扫一扫