微信小程序监听屏幕上滑下滑事件

最新推荐文章于 2024-03-02 15:37:55 发布

1佳佳佳佳

最新推荐文章于 2024-03-02 15:37:55 发布

阅读量6.8k

点赞数 3

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.youkuaiyun.com/ch_jia_jia/article/details/105856910

版权

本文介绍了一个微信小程序的需求，即在list页面中，当用户向上滑动时显示顶部的搜索框，向下滑动时隐藏搜索框，以提升用户体验。通过监听触摸事件并利用WXML、WXSS和JS实现该功能，详细列举了touch事件的相关属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求是在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.

最低0.47元/天解锁文章