您的位置：首页 > 其它

高仿猫影电影--第一课

2017-11-07 22:16 92 查看

　　今天正式开始了高仿猫影电影这个项目。这个项目使用CastApp开发，CastApp.js是对mui.js的二次封装，比mui还要方便开发。

　　这个项目在整体的结构上面和我上一篇博客中用到的思路基本一致，在此就不赘述了。下面给出index.html的完整代码。

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<link href="css/base.css" rel="stylesheet" />
</head>

<body>
<nav class="mui-bar mui-bar-tab">
<a id="defaultTab" class="mui-tab-item mui-active" href="movie.html">
<span class="mui-icon mui-icon-videocam"></span>
<span class="mui-tab-label">电影</span>
</a>
<a class="mui-tab-item" href="movie_theater.html">
<span class="mui-icon mui-icon-chatboxes"><span style="display: none;" class="mui-badge">1</span></span>
<span class="mui-tab-label">影院</span>
</a>
<a class="mui-tab-item" href="find.html">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">发现</span>
</a>
<a class="mui-tab-item" href="home.html">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">我的</span>
</a>
</nav>
<script src="js/mui.js"></script>
<script src="js/dongyi.js"></script>
<script type="text/javascript">
//mui初始化
mui.init();
var subpages = ['movie.html','movie_theater.html','find.html','home.html'];
var subpage_style = {
top:'0px',
bottom: '51px'
};

var aniShow = {};

//创建子页面，首个选项卡页面显示，其它均隐藏；
mui.plusReady(function() {
var self = plus.webview.currentWebview();
for (var i = 0; i < subpages.length; i++) {
var temp = {};
var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
if (i > 0) {
sub.hide();
}else{
temp[subpages[i]] = "true";
mui.extend(aniShow,temp);
}
self.append(sub);
}
});
//当前激活选项
var activeTab = subpages[0];

//选项卡点击事件
mui('.mui-bar-tab').on('tap', 'a', function(e) {
var targetTab = this.getAttribute('href');
if (targetTab == activeTab) {
return;
}
//显示目标选项卡
//若为iOS平台或非首次显示，则直接显示
if(mui.os.ios||aniShow[targetTab]){
plus.webview.show(targetTab);
}else{
//否则，使用fade-in动画，且保存变量
var temp = {};
temp[targetTab] = "true";
mui.extend(aniShow,temp);
plus.webview.show(targetTab,"fade-in",300);
}
//隐藏当前;
plus.webview.hide(activeTab);
//更改当前活跃的选项卡
activeTab = targetTab;
});
//自定义事件，模拟点击“首页选项卡”
document.addEventListener('gohome', function() {
var defaultTab = document.getElementById("defaultTab");
//模拟首页点击
mui.trigger(defaultTab, 'tap');
//切换选项卡高亮
var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
if (defaultTab !== current) {
current.classList.remove('mui-active');
defaultTab.classList.add('mui-active');
}
});
</script>
</body>

</html>

　　为了和猫影电影保持一致，我们要对界面上的一些元素的样式进行设置。基本的思路是这样的，先用PhotoShop对猫影电影的页面进行吸色，然后使用浏览器自带的“检查”功能找到是哪一个样式在控制着当前的这个元素，然后在我么自己新建的css文件里面添加同名的样式，然后把对应的属性修改了就可以了。

　　比如说，在下面左侧的图片例子当中，底部选项卡被激活的选项的颜色是淡蓝色，我们想把它改成右侧图片的样子。

　　我们通过使用浏览器的检查功能，发现控制激活选项颜色的样式是这样的

.mui-bar-tab .mui-tab-item.mui-active {
color: #007aff;
}

然后我们在base.css文件当中新建一个同名的样式

这样我们的这个新的样式就会覆盖原来的样式。

下面给出base.css文件的完整代码

/*
* 这是我们自己写的css文件
*/
/*页面主体的背景颜色*/
body{
background-color: #f5f5f5 !important;
}

/*设置标题头和子页面之间的间隔距离*/
.mui-bar-nav {
top: 0;
-webkit-box-shadow: 0 0 0;
box-shadow: 0 0 0;
}

/*设置底部导航栏的背景颜色  注意这里不能更改mui-bar的background-color属性   因为卡头的class也是mui-bar-tab*/
.mui-bar-tab {
background-color: #f5f5f5 !important;
}

/*设置底部选项卡被选中的时候的背景颜色*/
.mui-bar-tab .mui-tab-item.mui-active {
color: #d43e37;
}

/*表头的背景颜色*/
#header{
background: #d43e37;
}

/*表头中字体的颜色*/
#header h1{
color:#fff;
}

最终的项目效果图

注意，在css文件中不能使用//这种方式来注释，必须使用/**/的方式，我一开始就是因为使用了//的方式对代码进行了注释，最后导致样式不能正确的发挥作用。

好的，第一课就到此结束。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航