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

news/2024/7/20 2:57:19 标签: 小程序

需求是在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触摸被取消,当系统停止跟踪触摸的时候触发

http://www.niftyadmin.cn/n/875680.html

相关文章

julia有 pytorch包吗_Pytorch之Linear与MSELoss

在前面我们介绍了如何用Pytorch来实现一个两层的神经网络&#xff0c;但是其编码过程略微显得有点复杂。例如我们要手动自己定义权重参数&#xff0c;自己书写如何进行梯度更新等等。但要是某个网络多达几十层&#xff0c;那这个工作量显然是巨大的。因此&#xff0c;将一些常用…

SpringBoot项目打包并部署

SpringBoot项目打包并部署 项目打包&#xff1a; SpringBoot项目的配置文件&#xff1a;xxx.pom <build><plugins><!--打包--><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</ar…

vue input双向绑定时处理number类型数据为3-4-4类型(如手机号码)

这里input框使用的是vant组件的Field import Vue from vue; import { Field } from vant;Vue.use(Field);<van-fieldv-model"loginPhone"type"tel"maxlength"13" //此处长度为13是因为11位手机号码两个空格clearableplaceholder"请输…

树形菜单带搜索_还找不到想要的文章吗?公众号搜索方法大全

随着公众号发展&#xff0c;历史文章越来越多&#xff0c;有很多小伙伴在查找某篇看过的文章、或想找相关的文章还是有困难的。检索的方法还是有很多的。大家常用的是人工查看历史消息&#xff0c;但历史过久或文章过多查找十分困难。下面介绍三种方法&#xff1a;1. 公众号导航…

kafka数据 落盘_Kafka 为什么能那么快的 6 个原因

无论 kafka 作为 MQ 也好&#xff0c;作为存储层也罢&#xff0c;无非就是两个功能(好简单的样子)&#xff0c;一是 Producer 生产的数据存到 broker&#xff0c;二是 Consumer 从 broker 读取数据。那 Kafka 的快也就体现在读写两个方面了&#xff0c;下面我们就聊聊 Kafka 快…

对象数组根据某一字段合并元素

如&#xff1a; // arr为初始数组&#xff0c;key为需要处理的key名称unique (arr, key) {var tempArr []var newArr []for (let i 0; i < arr.length; i) {if (tempArr.indexOf(arr[i][key]) -1) {newArr.push({name: arr[i].name,activity: arr[i].activity})tempAr…

我的世界java版存档转基岩版_我的世界的蜜蜂进入基岩版了!

想必大家应该知道JAVA版1.15更新的蜜蜂吧&#xff0c;最近基岩版更新到1.14版本了&#xff0c;蜜蜂还有其它物品更新了。先说说蜜蜂&#xff0c;蜜蜂会成小群地生成在平原、向日葵平原和繁花森林中橡树和白桦树上悬挂的周围。在上述三种生物群系当中&#xff0c;每棵树都会有5%…

vue注入组件时报错:did you register the component correctly? For recursive components......

报错信息&#xff1a; vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option. 找原因&#xff1a; 查了很多&#xff0c;大多数都是说com…