一、今日完成任务
1. 任务目标——任务6；
2. 完成进度：98%；
3. 效果呈现
二、任务进展
1. 问题1：页面头部的切换开关，缩小rem大小时，切换开关的高度没有同步缩小，导致置于顶部，可能由于em的连锁反应问题，缩小比例不同；
① 修正：把font-size的声明置于文字层， 不在父元素进行声明来给文字层继承，同时修正文字层的居中问题，采用回flex布局；
html
<input type="checkbox" id="find" onclick="window.location.href='#top'" />
<!--点击时页面返回到顶部-->
<label for="find">
<span class="button_bg"></span>
<span class="text_left">找雇主</span>
<span class="text_right">找护工</span>
</label>
<!--为能关联到主要内容的页面切换，需其父元素为同一个-->
CSS
input[type="checkbox"] {
display: none;
} /* 隐藏复选框 */
label {
display: flex;
align-items: center;
position: fixed;
top: 0;
margin: 0.5em 0;
left: calc(50% - 6.8em);
z-index: 500;
width: 13.6em;
height: 3.4em;
border-radius: 0.5em;
background-color: #55a8b3;
cursor: pointer;
} /* 定义交互样式，即点击label的范围，即会使对应的input生效 */
.button_bg {
position: absolute;
right: 0;
width: 6.8em;
height: 3.4em;
border-radius: 0.5em;
background-color: #fff;
} /* 定义滑块样式 */
.text_left,
.text_right {
position: absolute;
text-align: center;
width: 50%;
font-size: 1.7em;
} /* 声明变为层模型，在滑块之上，并用flex布局实现居中 */
.text_left {
color: #fff;
}
.text_right {
color: #5fc0cd;
left: 50%;
} /* 定义文本样式 */
.button_bg,
.text_left,
.text_right {
-webkit-transition: right 0.3s, color 0.3s;
transition: right 0.3s, color 0.3s;
} /* 动画过渡效果 */
#find:checked + label .button_bg {
right: 6.8em;
} /* 当复选框被选中时，+ 号后面的有相同父元素的同级元素的样式生效，必须先写同级元素再写子元素 */
#find:checked + label .text_left {
color: #5fc0cd;
} /* 复选框被选中时，左边文字变色 */
#find:checked + label .text_right {
color: #fff;
} /* 复选框被选中时，右边文字变色 */
2. 问题2：实现ul和li标签构成的下拉列表，但难以实现在纯CSS的情况下，点击li选项后，下拉列表消失的动作；
html
<!--
<nav>
<ul>
<li class="sel_left">
所在地
<ul>
<li>北京</li>
<li>上海</li>
<li>深圳</li>
<li>广州</li>
</ul>
</li>
<li class="sel_middle">
食宿
<ul>
<li>包食</li>
<li>包住</li>
<li>包食包住</li>
</ul>
</li>
<li class="sel_right">
病人情况
<ul>
<li>能自理</li>
<li>不能自理</li>
<li>半失能</li>
<li>手术后</li>
</ul>
</li>
</ul>
</nav>
导航栏简单的下拉列表-->
CSS
nav {
position: fixed;
top: 4.4em;
z-index: 100;
width: 100%;
height: 4em;
background-color: #fff;
border-bottom: 0.1em solid #e1e5e7;
} /* 定义导航栏的属性 */
ul,
li {
outline: none;
list-style: none;
color: #999;
} /* 去除下拉列表的默认样式 */
nav > ul {
display: flex;
box-sizing: border-box;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
} /* 定义导航栏的布局 */
li[class^="sel"] {
text-align: center;
line-height: 2.5rem;
width: 33.3%;
height: 100%;
font-size: 1.4em;
border-right: 0.07em solid #e1e5e7;
cursor: pointer;
}
li[class$="right"] {
border: none;
}
li[class^="sel"]:nth-child(2) {
width: 33.4%;
} /* 定义导航栏的样式 */
li[class^="sel"]:before {
content: "";
float: right;
margin-top: 1.125rem;
margin-right: 0.375rem;
z-index: 1000;
width: 0;
height: 0;
border-width: 0.25rem;
border-style: solid;
border-color: #AFBAC0 transparent transparent transparent;
} /* 定义导航栏的小三角的样式 */
/*
li[class^="sel"] ul {
display: none;
padding: 0;
box-shadow: 0 0.2em 0.6em #e1e5e7;
} 定义下拉列表的整体样式 */
/*
li[class^="sel"] li {
background-color: #fff;
border-bottom: 0.07em solid #e1e5e7;
} 定义下拉列表选项的样式 */
/*
li[class^="sel"] li:active,
li[class^="sel"]:active {
background-color: #e6e6e6;
} 定义选项的点击状态，难以实现选择框的动效，不如select标签 */
/*
li[class^="sel"]:hover > ul {
display: block;
} 定义导航栏点击出现选项列表的触发动作 */
3. 问题3：实现ios的原生选择器，即滚筒选择器，通过https://blog.csdn.net/chenxueshanBlog/article/details/78863435解释实现；
官网地址：http://zhoushengfe.com/iosselect/website/index.html
step1：下载外联的css和js文件
① 通过npm下载，参考npm的下载与配置，在node.js中文网下载node.js时，自动配置npm一起下载并安装，在运行-cmd里输入相应的代码配置，最后输入npm install iosselect进行下载iosselect的代码包；
② 在官网的github上下载，并解压；
step2：应用文件
① 复制其中的src文件夹里的，iosSelect.js和iosSelect.css的文件夹放在任务6的网站目录里，且可以参考demo文件夹里的html文件和js文件的设置，可以实现各种选择器；
② 其中html文件设置引用路径：
<link rel="stylesheet" href="index.css" />
<!--index.css对index.html文件的样式设置-->
<link rel="stylesheet" href="../home/src/iosSelect.css" />
<!--iosSelect.css对弹出页和选择器的样式进行设置-->
</head>
<script src="index.js"></script>
<!--index.js储存各个选项内容作为数组-->
<script src="../home/src/iosSelect.js" async defer>
</script>
<!--iosSelect.js对弹出页和选择框进行动态设置-->
③ html文件设置导航栏的按钮布局，div标签代替ul、li标签也可以，采用input为返回选项值并显示出来，增加readonly，避免点击时调用输入键盘：
<nav>
<ul>
<li class="sel_left" id="address">
<input
type="hideen"
name="address_id"
id="addressId"
placeholder="所在地"
value=""
readonly
/>
</li>
<li class="sel_middle" id="term">
<input
type="hideen"
name="term_id"
id="termId"
placeholder="食宿"
value=""
readonly
/>
</li>
<li class="sel_right" id="illness">
<input
type="hideen"
name="illness_id"
id="illnessId"
placeholder="病人情况"
value=""
readonly
/>
</li>
</ul>
</nav>
④ index.css文件设置导航栏的布局和input按钮的样式，导航栏的布局如上面ul、li的布局：
input[name$="id"] {
margin: 0 auto;
width: 80%;
height: 100%;
font-size: 1em;
} /* 定义导航栏选择框按钮的布局和尺寸 */
input[name$="id"]::-webkit-input-placeholder {
text-align: center;
color: #999;
}
input[name$="id"]:-moz-placeholder {
text-align: center;
color: #999;
}
input[name$="id"]::-moz-placeholder {
text-align: center;
color: #999;
}
input[name$="id"]:-ms-input-placeholder {
text-align: center;
color: #999;
} /* 定义选择框按钮的默认字体布局以及颜色 */
⑤ 因弹出页的html文件只有点击触发后才出现，所以优先在index.html的body标签里面，在引用外联js文件的下面，增加触发条件即script标签的内联文件，如“所在地”的点击事件配置，基本跟address和addressId的两个id名相关的都要修改为自己的id名：
<script type="text/javascript">
var addressDom = document.querySelector("#address"); // 绑定一个点击触发元素
var addressIdDom = document.querySelector("#addressId"); // 绑定一个存储结果的输入框元素
addressDom.addEventListener("click", function() {
// 添加监听的点击事件
var addressId = addressDom.dataset["id"]; // 获取index.js的数组的id属性值
var addressName = addressDom.dataset["value"]; // 获取index.js的数组的value属性值
var addressSelect = new IosSelect(
1, // 第一个参数为级联层级，演示为1
[address_data], // index.js里的对应数组名
{
container: ".container", // 容器class
title: "", // 标题
itemHeight: 40, // 每个元素的高度
itemShowCount: 3, // 每一列显示元素个数，超出将隐藏
oneLevelId: addressId, // 第一级默认值
callback: function(selectOneObj) {
// 用户确认选择后的回调函数,返回选择值
addressIdDom.value = selectOneObj.id;
addressDom.innerHTML = selectOneObj.value;
addressDom.dataset["id"] = selectOneObj.id;
addressDom.dataset["value"] = selectOneObj.value;
},
fallback: function() {
console.log(1);
},
maskCallback: function() {
console.log(2);
}
}
);
});
⑥ 同时在index.js文件添加选项内容的数组，由此给上面配置：
var address_data = [
{'id': '10001', 'value': '北京'},
{'id': '10002', 'value': '上海'},
{'id': '10003', 'value': '深圳'},
{'id': '10004', 'value': '广州'}
];//所在地的数组
var term_data = [
{'id': '10001', 'value': '包食'},
{'id': '10002', 'value': '包住'},
{'id': '10003', 'value': '包食包住'}
];//食宿的数组
var illness_data = [
{'id': '10001', 'value': '能自理'},
{'id': '10002', 'value': '不能自理'},
{'id': '10003', 'value': '半失能'},
{'id': '10004', 'value': '手术后'},
];//生病情况的数组
⑦ 完成后，即可点击“所在地”按钮即可弹出选项的选择器，如需对选择器的样式进行设置，那打开iosselect.css文件，对弹出页和选择器进行设置，因不知道如何修改弹出页的html文件，只有在chrome浏览器调试时，查看弹出页的html文件：
div, ul, li {
margin: 0;
padding: 0;
}
ul, li {
list-style: none outside none;
} /* 去除默认样式 */
/* layer begin */
.ios-select-widget-box.olay {
position: fixed;
z-index: 500;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
background: rgba(0, 0, 0, 0.5);
} /* 定义背景变暗 */
.ios-select-widget-box.olay > div {
position: fixed;
z-index: 1000;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
visibility: visible;
} /* 定义弹出选项区的样式 */
.ios-select-widget-box header.iosselect-header {
text-align: center;
z-index: 9999;
width: 100%;
height: 4.4em;
line-height: 4.4em;
background-color: #fff;
border-bottom: .1em solid #E5E5E5;
} /* 定义选项区的头部 */
.ios-select-widget-box header.iosselect-header a {
font-size: 1.6em;
color: #EA8989;
text-decoration: none;
} /* 定义选项区头部两端的文字样式 */
.ios-select-widget-box header.iosselect-header a.close {
float: left;
padding-left: 2em;
height: 4.4em;
line-height: 4.4em;
} /* 定义关闭文字的位置 */
.ios-select-widget-box header.iosselect-header a.sure {
float: right;
padding-right: 2em;
height: 4.4em;
line-height: 4.4em;
} /* 定义确定文字的位置 */
.ios-select-widget-box ul {
background-color: #fff;
} /* 定义选项的背景 */
.ios-select-widget-box ul li {
overflow: hidden;
height: 4em;
font-size: 1.6em;
line-height: 4em;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
background-color: #fff;
color: #3F3F3F;
opacity: .3;
transform: scaleY(0.8);
} /* 定义所有选项的样式 */
.ios-select-widget-box ul li.at {
font-size: 1.6em;
opacity: 1;
color: #3F3F3F;
transform: scaleY(1);
} /* 定义选中选项的样式 */
⑧ 剩余的其他样式不用动，如需设置更多层级时，或其他动画可以设置，还是不知道怎么修改弹出页的html文件，所以选择器的头部两端的文字，难以改为”关闭“和“完成”；
4. 问题4：去除点击按钮时，产生的蓝色高光情况
body {
-webkit-tap-highlight-color: transparent;
}
三、遇到的困难
1. 困难1：overflow-x:hidden在chrome浏览器可以，在移动端浏览器也可以，但在微信打开却失效，导致可以横向移动，没有找到方法解决；
2. 困难2：还是没有留到时间去学习应用bootstrap，可能会有更方便的方式实现功能；
3. 困难3：难以理解弹出页的html文件隐藏在哪里，且不知道如何才能调用来修改；
四、明天任务计划
1. 学习bootstrap；
2. 分析和尝试任务7；
返回列表
评论