每日优鲜城市布局city.html

最新推荐文章于 2021-06-08 22:38:58 发布

chengtangjian1797

最新推荐文章于 2021-06-08 22:38:58 发布

阅读量590

点赞数

文章标签：爬虫 javascript ViewUI

原文链接：https://my.oschina.net/u/3584445/blog/1162466

版权

city.html

仿每日优鲜：城市布局设置

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<title>title</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
html,
body {
height: 100%;
background-color: rgba(38, 38, 38, 0.7);
}

header {
width: 100%;
height: 96px;
}

header .title {
width: auto;
color: #fff;
box-sizing: border-box;
margin: 0 32px;
padding-bottom: 20px;
padding-top: 64px;
text-align: center;
border-bottom: 2px solid rgb(218, 1, 107);
}

ol {
width: 100%;
text-align: center;
}

ol .city {
margin-top: 20px; //距离上方像素
width: 100%;
height: 20px;
line-height: 30px;
color: #fff;
font-size: 15px;
}
</style>
</head>

<body>
<header>
<div class="title">选择所需服务的地区</div>
</header>
<ol id="myol">

</ol>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
var citys = [];
apiready = function() {
//获取城市
citys = ["长沙市", "西安市", "北京市", "成都市", "南京市", "厦门市"];
var ol = $api.byId('myol');
var olHtml = ''; //ol的内容
//根据城市数量创建li
for (var i = 0; i < citys.length; i++) {
olHtml += '<li class="city" tapmode οnclick="setCity(' + i + ')">' + citys[i] + '</li>';
}
$api.html(ol, olHtml); //给ol拼接内容
};

function setCity(index) {
/*获取当前选中的城市*/
/*将城市传回主界面*/
api.sendEvent({
name: 'cityName',
extra: {
city: citys[index]
}
});
/*关闭当前frame*/
api.closeFrame({
name: 'city'
});

}
</script>

</html>

转载于:https://my.oschina.net/u/3584445/blog/1162466

chengtangjian1797

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
每日优鲜城市布局city.html

city.html 仿每日优鲜：城市布局设置 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="ma...
复制链接

扫一扫