需求是在list页中带有搜索框,下滑时隐藏顶部输入框,上滑时显示输入框,提高一点点用户体验。避免想要搜索就必须上滑至顶部。。
实现:
首先输入框得固定在顶部。
wxml:class="search-box {{showSearch? '':'hide'}} bindtouchstart="handletouchstart" bindtouchmove="handletouchmove"
wxss:
.hide{
display: none;
}
.search-box {
position: fixed;
top: 0;
left: 0;
}
js:
data: {
startY: 0, //滑动开始y轴位置
lastY: 0, //滑动开始y轴位置
showSearch: true, //是否显示搜索框
},
// 监听页面滚动事件
handletouchmove (event) {
let currentY = event.changedTouches[0].clientY
if (currentY <= this.data.startY) {
this.setData({
showSearch: false
})
console.log("下滑")
} else {
this.setData({
showSearch: true
})
console.log("上滑")
}
},
//滑动开始事件
handletouchstart: function (event) {
this.data.startY = event.changedTouches[0].clientY
},
功能实现!
附
touch事件event包含的属性
clientX:触摸目标在视口中的x坐标。
clientY:触摸目标在视口中的y坐标。
identifier:标识触摸的唯一ID。
pageX:触摸目标在页面中的x坐标。
pageY:触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触摸的DOM节点目标。
移动端浏览器触摸事件
事件名称 | 描述 |
---|---|
touchStart | 触摸开始,多点触控,后面的手指同样会触发 |
touchmove | 接触点改变,滑动时 |
touchend | 触摸结束,手指离开屏幕时 |
touchcancel | 触摸被取消,当系统停止跟踪触摸的时候触发 |