主要结构 HTML
<div class="box" ref="Box">
<div class="top">
<!-- 头部input -->
<div class="search-box">
<!-- 左边箭头 -->
<div class="left-search">
<img src="@/assets/image/left.gif" alt="" />
</div>
<div class="search">
<!-- 商品 -->
<div class="commodity">
商品
<span><img src="@/assets/image/bottom.gif" alt="" /></span>
</div>
<input type="text" ref="inputRef" placeholder="请输入内容" />
<!-- 默认相机相机 -->
<div class="camera"><img src="@/assets/image/camera.gif" alt="" /></div>
<!-- 获取焦点显示的叉号 -->
<!-- <div class="camera" ></div> -->
</div>
<div class="right-search">
<a href="javascript:;">搜索</a>
</div>
</div>
</div>
<!-- 最近搜索 和搜索发现-->
<div class="recently-search">
<!-- 最近 -->
<div class="recently">
<div class="recently-left"><img src="@/assets/image/time.gif" alt="" /> 最近搜索</div>
<!-- 全删 -->
<div class="recently-del"><img src="@/assets/image/delete.gif" alt="" /></div>
</div>
<!-- 搜索发现 -->
<div class="history">
<ul ref="more">
<li ref="history">
<span class="content">大家萨克</span>
</li>
<li ref="history">
<span class="content">收到哈</span>
</li>
<li ref="history">
<span class="content">得撒大萨</span>
</li>
</ul>
</div>
<!-- 最近 -->
<div class="recently">
<div class="recently-left"><img src="@/assets/image/compass.gif" alt="" /> 搜索发现</div>
</div>
<!-- 历史记录 -->
<div class="history">
<ul ref="more">
<li ref="history">
<span class="content">大家萨克</span>
</li>
<li ref="history">
<span class="content">收到哈</span>
</li>
<li ref="history">
<span class="content">得撒大萨</span>
</li>
</ul>
</div>
</div>
</div>
CSS
ul {
margin: 0;
padding: 0;
}
.box {
width: 100%;
height: 100vh;
overflow-y: auto;
position: fixed;
background-color: #fff;
}
.top {
width: 100%;
height: 135px;
background-color: #ffff;
}
.search-box {
width: 100%;
height: 135px;
background-color: #ffff;
display: flex;
position: fixed;
z-index: 999;
// 右侧箭头
.left-search {
width: 80px;
height: 135px;
// background-color: aqua;
display: flex;
align-items: center;
justify-content: space-around;
img {
width: 25px;
height: 35px;
}
}
// 搜索框区域
.search {
width: 100%;
height: 135px;
// background-color: aquamarine;
display: flex;
align-items: center;
position: relative;
input {
width: 100%;
padding-right: 70px;
height: 75px;
border-radius: 15px;
background-color: #ececec;
border: none;
outline: none;
padding-left: 125px;
font-size: 30px;
box-sizing: border-box;
}
// 商品文字
.commodity {
position: absolute;
font-size: 30px;
left: 20px;
color: #555555;
font-weight: 400;
img {
// font-size: 30px;
width: 20px;
height: 12px;
position: relative;
}
span::before {
content: '';
width: 2px;
height: 30px;
background-color: #d7d7d7;
position: absolute;
left: 95px;
top: 3px;
}
}
// 相机
.camera {
position: absolute;
right: 20px;
img {
width: 36px;
height: 32px;
margin-top: 5px;
}
}
}
// 搜索文字
.right-search {
width: 120px;
height: 135px;
// background-color: salmon;
display: flex;
align-items: center;
font-size: 35px;
justify-content: space-around;
a {
color: red;
}
}
}
.recently-box {
width: 100%;
height: 145px;
.recently {
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding: 0 30px;
}
}
// 最近搜索
.recently-search {
width: 100%;
height: calc(100vh - 130px);
// 最近文字大盒子
.recently {
width: 100%;
height: 65px;
display: flex;
align-items: center;
justify-content: space-between;
// 左边文字
.recently-left {
color: #d3d3d3;
font-size: 30px;
height: 65px;
display: flex;
align-items: center;
padding-left: 20px;
img {
width: 28px;
height: 26px;
margin-right: 5px;
}
}
// 删除按钮
.recently-del {
display: flex;
align-items: center;
height: 65px;
padding-right: 20px;
img {
width: 30px;
height: 30px;
}
}
}
// 历史记录
.history {
position: relative;
// height: 120px;
// 更多
.more {
font-size: 20px;
color: #999;
position: fixed;
right: 10px;
top: 285px;
border-radius: 0;
background-color: #ffff;
}
ul {
display: flex;
// overflow: hidden;
// margin: 0 30px;
padding-left: 30px;
box-sizing: border-box;
width: 100%;
flex-wrap: wrap;
li {
height: 65px;
line-height: 65px;
list-style: none;
font-size: 30px;
border-radius: 50px;
background-color: #f9f9f9;
padding: 0px 15px;
margin-right: 20px;
// flex: 1;
margin-top: 20px;
position: relative;
// 长按显示叉号
.fork {
position: absolute;
color: #d3d3d3;
font-size: 30px;
top: -20px;
right: -15px;
z-index: 999;
}
.content {
display: inline-block;
max-width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
// 叉号显示
.del {
display: block;
}
}
}
}
}
1.首先页面上必须有两个大盒子,里边的盒子背景颜色都设置成一致的
最外层盒子设置
height: 100vh;
overflow-y: auto;
position: fixed;
滚动的内容区域设置 height: calc(100vh - 130px); 130是顶部盒子的高-5px
2.获取子盒子 获取输入框
const Box = ref<HTMLDivElement>()
const inputRef = ref<HTMLInputElement>()
3.设置两个初始值
const start = {
startY: 0,
moveY : 0
}
4.手指刚按下的时候执行FnStart里边的代码,然后先获取到手指刚开始按下的位置,刚开始的时候往下滑不会滑动,因为刚开始的时候是下边滚动,上边的滚动值为0;所以要在刚开始的时候设置一个滚动的值;最后就解决了这个问题
const FnStart = (ev: TouchEvent) => {
start.startY = ev.changedTouches[0].pageY
//设置滚动的值
Box.value!.scrollTop = 2
//触摸滑动事件
document.ontouchmove = FnMove
}
然后手指移动的时候再执行FnMove里边代码,用手指滑动的位置 - 刚开始手指按下时获取的位置 然后再判断一下是否 >= 1; 用Math.abs()取绝对值,让这个 绝对值 >= 1 的时候让input框失去焦点
const FnMove = (ev: TouchEvent) => {
start.moveY = ev.changedTouches[0].pageY - start.startY
// Math.abs(start.moveY) 取绝对值 怎么样都是正数
if (Math.abs(start.moveY) >= 1) {
// 让input框失去焦点 收起软键盘
inputRef.value!.blur()
}
}
js全代码
<script setup lang="ts">
import { onMounted, ref } from 'vue'
const Box = ref<HTMLDivElement>()
const inputRef = ref<HTMLInputElement>()
const start = {
startY: 0,
y: 0
}
const FnMove = (ev: TouchEvent) => {
start.y = ev.changedTouches[0].pageY - start.startY
if (Math.abs(start.y) >= 1) {
inputRef.value!.blur()
}
}
const FnStart = (ev: TouchEvent) => {
start.startY = ev.changedTouches[0].pageY
Box.value!.scrollTop = 2
document.ontouchmove = FnMove
}
onMounted(() => {
console.log(Box.value)
console.log(inputRef.value)
// Box.value.ontouchmove =
Box.value!.ontouchstart = FnStart
})
</script>