小程序catchtouchmove事件

最新推荐文章于 2024-09-13 10:22:56 发布

I-T枭

最新推荐文章于 2024-09-13 10:22:56 发布

阅读量6.9k

点赞数

分类专栏：小程序

本文链接：https://blog.csdn.net/hahahhahahahha123456/article/details/106526871

版权

本文详细介绍了小程序中`catchtouchmove`事件的使用，包括如何阻止页面的默认滑动行为，以及在实际开发中如何结合`wx:if`或`hidden`属性实现特定区域的滑动效果。通过实例代码解析，帮助读者深入理解`catchtouchmove`在页面交互中的作用。

摘要由CSDN通过智能技术生成

wxml：

<view class="moveWrap">
	<view class="move" style="height:{
  {rH}}rpx;width:{
  {rW}}rpx;left:{
  {x}}px;top:{
  {y}}px;" catchtouchmove="_minMove"></view>
</view>

wcss:

/* pages/move/move.wxss */
.moveWrap {
  height: 100vh;
  width: 100vw;
  position: relative;
}

.move {
  height: 60rpx;
  width: 60rpx;
  border-radius: 50%;
  background: #ccc;
  position: absolute;
  top: 0;
  left: 0;
}

js:

// pages/move/move.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    x: 0,
    y: 0,
    windowW: 0,
    windowH: 0,
    rW: 60,
    rH: 60,
  },

  _minMove: function (e) {
    const {
      rH,
      rW,
      windowH,
      windowW
    } = this.data;
    let x = e.changedTouches[0].pageX;
    let y = e.changedTouches[0].pa