想实现一个类似手机京东App热搜的横向滑动，一开始走上了错误的道路，想要使用touchmove来完成滑动部分。结果越整越复杂，效果还不行，滑动后，两边都有空白不知道怎么消除。作为前端小白，一碰到这种问题就十分头疼。
后来重新整理了思路，参考了CSS ul 横向滑动并超出屏幕可滑动，直接用CSS就能完成了，很感谢。
其实按照我的原始需求，并不需要能滑动，只要平铺排列出来就可以了。所以把两种都放这儿吧
<html lang="cn" class="ui-mobile">
<head>
<title>最近搜索</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<meta name="version" content="1">
</head>
<style>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, table, th, td {margin:0; padding:0;}
ul{
list-style: none;
}
.recent-search-tags {
padding-right: 2px;
overflow: hidden;
font-size: .85rem;
text-align: center;
margin-left: 15px;
}
.recent-search-tags span {
display: block;
max-width: 100%;
overflow: hidden;
padding-right: 10px;
padding-bottom: 10px;
float: left;
margin-right: 12px;
}
.recent-search-tags a {
height: 1.4375rem;
line-height: 1.5rem;
border-radius: 3px;
display: block;
width: 100%;
color: #686868;
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
background-color: #f0f2f5;
padding-left: 4px;
padding-right: 4px;
overflow: hidden;
}
.recent-search-tag {
display: block;
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
#resent-search3 {
margin-left: 15px;
overflow-x: auto;
white-space:nowrap;
width: auto;
}
::-webkit-scrollbar {
display: none;
}
.resent-search-tag3 {
display: inline-block;
font-size: 10pt;
border-radius: 3px;
background-color: #f0f2f5;
color: #686868;
padding: 2px 10px;
margin-right: 10px;
}
</style>
<body>
<div id="resent-search-view2" style="margin-bottom: 30px;">
<div style="margin-bottom: 20px;">最近搜索2</div>
<div class="recent-search-tags">
<span><a href="javascript:void(0);"><i class="recent-search-tag">6500S</i></a></span>
<span><a href="javascript:void(0);"><i class="recent-search-tag">SM-</i></a></span>
<span><a href="javascript:void(0);"><i class="recent-search-tag">X26</i></a></span>
<span><a href="javascript:void(0);"><i class="recent-search-tag">惠普</i></a></span>
<span><a href="javascript:void(0);"><i class="recent-search-tag">CS201</i></a></span>
<span><a href="javascript:void(0);"><i class="recent-search-tag">BP8904</i></a></span>
<span><a href="javascript:void(0);"><i class="recent-search-tag">101</i></a></span>
<span><a href="javascript:void(0);"><i class="recent-search-tag">fi-61</i></a></span>
<span><a href="javascript:void(0);"><i class="recent-search-tag">爱心之光</i></a></span>
</div>
</div>
<div id="resent-search-view3">
<div style="margin-bottom: 20px;">最近搜索3</div>
<ul id="resent-search3">
<li class="resent-search-tag3"><i>6500S</i></li>
<li class="resent-search-tag3"><i>SM-</i></li>
<li class="resent-search-tag3"><i>X26</i></li>
<li class="resent-search-tag3"><i>CS201</i></li>
<li class="resent-search-tag3"><i>BP8904</i></li>
<li class="resent-search-tag3"><i>101</i></li>
<li class="resent-search-tag3"><i>fi-61</i></li>
<li class="resent-search-tag3"><i>MT990</i></li>
<li class="resent-search-tag3"><i>惠普</i></li>
<li class="resent-search-tag3"><i>CDD8766</i></li>
<li class="resent-search-tag3"><i>南天</i></li>
</ul>
</div>
</body>
</html>
效果：
捕获.PNG
其中“最近搜索3”可以横向滑动（滚动）
注意：
::-webkit-scrollbar {
display: none;
}
用于在iOS设备上去掉横向滚动条（安卓没有这个样式也没有横向滚动条）
网友评论