Case 1:
Recent projects to increase the unread messages in chat after reading the other becomes a read function, and the background to discuss specific logic, Taiwan has written logic, and the rest is the use of jQuery
find()方法will become unread messages read messages.
The relevant code
<style>
html,
body {
min-height: 100%;
height: 100%;
background-color: #f7f7f7;
}
.talkContainter {
padding: 20px 12px;
padding-bottom: 72px;
background: #f7f7f7;
}
.timeTitle {
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
.timeTitle span {
background: #cacbcc;
color: #fff;
border-radius: 4px;
padding: 0 8px;
height: 20px;
line-height: 20px;
font-size: 12px;
}
.talkItem {
display: flex;
align-items: center;
}
.sendMess1 {
background: #ffffff;
color: #333;
border-radius: 5px;
padding: 0 10px;
line-height: 35px;
min-height: 35px;
height: 100%;
margin-right: 5px;
}
.read{
position: absolute;
margin-right:2px;
color:#808080;
font-size:10px;
color: #ffffff;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
padding: 1.5px 1.5px;
}
.unReadColor{
background-color:#cacbcc;
}
</style>
<body id="bodyId">
<div class="talkContainter" id="talkContainter">
<div class='timeTitle'>
<span>2006-04-14</span>
</div>
<section class='talkItem' style='direction: ltr;'>
<span>
<img style='width:50px;height:50px;border-radius:50%;' class='iconImg' src='http://ymzp.0633hr.com/upload/app/2019-04-16/1555399938228-2019-04-16.jpg' />
</span>
<span style='position:relative;margin-left:5px;'>
<span class='sendMess1'>CoderZB</span>
<span class='triangelSend1'></span>
</span>
<div style='height:35px;'><span class='read unReadColor'>未读</span></div>
</section>
<div class='timeTitle'>
<span>1935-07-14</span>
</div>
<section class='talkItem' style='direction: rtl;'>
<span>
<img style='width:50px;height:50px;border-radius:50%;' class='iconImg' src='http://ymzp.0633hr.com/upload/app/2019-04-16/1555399938228-2019-04-16.jpg' />
</span>
<span style='position:relative;margin-left:5px;'>
<span class='sendMess1'>Love Share</span>
<span class='triangelSend1'></span>
</span>
<div style='height:35px;'><span class='read unReadColor'>未读</span></div>
</section>
<div class='timeTitle'>
<span>1935-07-14</span>
</div>
<section class='talkItem' style='direction: rtl;'>
<span>
<img style='width:50px;height:50px;border-radius:50%;' class='iconImg' src='http://ymzp.0633hr.com/upload/app/2019-04-16/1555399938228-2019-04-16.jpg' />
</span>
<span style='position:relative;margin-left:5px;'>
<span class='sendMess1'>Love Life</span>
<span class='triangelSend1'></span>
</span>
<div style='height:35px;'><span class='read unReadColor'>未读</span></div>
</section>
</div>
</body>
jQuery find () implement varying unread message read message
$("#talkContainter").find(".read").text("已读");
$("#talkContainter").find(".read").css({"background-color":"#70c67f"});
image.png
Case 2:
Two div control the tab bar at the top and the middle of the tab bar
to select a tag in the middle of the tab bar (for example暂停中) when you scroll the tab bar to the top, the top of the tab bar to make at this time暂停中is selected.
Conversely Select the tab bar at the top of a label (for example暂停中) when you scroll the tab bar to the middle, the middle of the tab bar to make at this time暂停中is selected.
The relevant code
<style>
body {
background: #fff;
color: #333;
}
.screen {
background: white;
}
.menuBox {
height: 44px;
width: 100%;
display: flex;
background: white;
border-bottom: 1px solid #eaebeb;
}
.menuBox .screen-middle {
flex-grow: 1;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
position: relative;
justify-content: center;
}
.menuBox .screen-middle-top {
flex-grow: 1;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
position: relative;
justify-content: center;
}
.screen-middle div {
font-size: 13px;
}
.tab-active {
font-weight: bold;
}
.tab-active:before {
content: '';
width: 20px;
height: 3px;
position: absolute;
left: 0;
right: 0;
bottom: 0px;
margin: auto;
z-index: 4;
background-color: #ff9829;
border-radius: 9px;
}
.doubleTitle {
display: none;
position: fixed;
width: 100%;
flex-direction: column;
z-index: 99;
background: #fff;
}
</style>
<body>
<div class="doubleTitle">
<div class="status" style="width:100%;background:#ff9829;"></div>
<div class="menuBox" >
<div class="screen-middle-top tab-active" tapmode>
<div class="nav" title="all">全部</div>
</div>
<div class="screen-middle-top" tapmode>
<div class="nav" title="hiring">招聘中</div>
</div>
<div class="screen-middle-top" tapmode>
<div class="nav" title="pause">暂停中</div>
</div>
<div class="screen-middle-top" tapmode>
<div class="nav" title="over">已结束</div>
</div>
<div class="screen-middle-top" tapmode>
<div class="nav" title="confirm">待审核</div>
</div>
<div class="screen-middle-top" tapmode>
<div class="nav" title="rejected">审核驳回</div>
</div>
</div>
</div>
<div class="screen">
<div class="menuBox">
<div class="screen-middle tab-active" tapmode>
<div class="nav" title="all">全部</div>
</div>
<div class="screen-middle" tapmode>
<div class="nav" title="hiring">招聘中</div>
</div>
<div class="screen-middle" tapmode>
<div class="nav" title="pause">暂停中</div>
</div>
<div class="screen-middle" tapmode>
<div class="nav" title="over">已结束</div>
</div>
<div class="screen-middle" tapmode>
<div class="nav" title="confirm">待审核</div>
</div>
<div class="screen-middle" tapmode>
<div class="nav" title="rejected">审核驳回</div>
</div>
</div>
</div>
</body>
jQuery find () for the currently selected label class selector added, and at the same time as another function of the label is added in the same class selector
// 给类选择器为screen-middle的标签添加点击事件
$('.screen-middle').on('click', function() {
// 给当前点击的screen-middle添加tab-active选择器，移除和screen-middle同级的tab-active类选择器
$(this).addClass('tab-active').siblings().removeClass('tab-active');
// 在screen-middle里面找到类名为nav的标签，取出该标签title属性中的值
ordetType = $(this).find('.nav').attr('title');
// 遍历类选择器为screen-middle-top的标签 内容的长度
for (var i = 0; i <= $('.screen-middle-top').length; i++) {
// 如果 第i个screen-middle-top中的 名为nav的类选择器的title对应的值 等于ordetType，就执行{}
if($(".screen-middle-top").eq(i).find(".nav").attr('title') == ordetType){
console.log($(".screen-middle-top").eq(i).find(".nav").attr('title'));
// 移除screen-middle-top的所有tab-active
$(".screen-middle-top").removeClass('tab-active');
// 为遍历出的符合要求的 第i个screen-middle-top 添加tab-active。
$(".screen-middle-top").eq(i).addClass('tab-active');
}
}
// 网络请求
fnGetJobData(false);
})
// 给类选择器为screen-middle-top的标签添加点击事件
$('.screen-middle-top').on('click', function() {
// 给当前点击的screen-middle添加tab-active选择器，移除和screen-middle同级的tab-active类选择器
$(this).addClass('tab-active').siblings().removeClass('tab-active')
// 在screen-middle里面找到类名为nav的标签，取出该标签title属性中的值
ordetType = $(this).find('.nav').attr('title');
// 遍历类选择器为screen-middle的标签 内容的长度
for (var i = 0; i <= $('.screen-middle').length; i++) {
// 如果 第i个screen-middle中的 名为nav的类选择器的title对应的值 等于ordetType，就执行{}
if($(".screen-middle").eq(i).find(".nav").attr('title') == ordetType){
// 移除screen-middle的所有tab-active
$(".screen-middle").removeClass('tab-active');
// 为遍历出的符合要求的 第i个screen-middle添加tab-active。
$(".screen-middle").eq(i).addClass('tab-active');
}
}
fnGetJobData(false);
})
101.175524.gif
screen-middle.png
screen-middle-top.png
Reproduced in: https: //www.jianshu.com/p/629cc5930690