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

最新推荐文章于 2022-10-21 00:24:56 发布

萧棠

最新推荐文章于 2022-10-21 00:24:56 发布

阅读量642

点赞数

文章标签： html vue.js css

本文链接：https://blog.youkuaiyun.com/zhaowenxue/article/details/120222943

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生写一个灵活性很强的项目，后端通过生成二维码进入页面，可以用做公众号，项目引入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)
})