search
HomeWeChat AppletMini Program DevelopmentBasics of Mini Program Development: Sliding Operation (10)

In actual mobile application interaction methods, the most common one is sliding operation. Sliding left and right to switch pages, spreading your fingers to enlarge pictures, etc. are all done by sliding operations.

The related events provided by WeChat applet by default are as follows:

Basics of Mini Program Development: Sliding Operation (10)

Touch related operation events

tapCorresponding to click operations, longtap is also provided to support long press operations. These are relatively simple, so I won’t go into details.
touchmove corresponds to the sliding operation, and bindtouchmove can respond to the sliding operation.

//wxml
<view id="id" bindtouchmove="handletouchmove" style = "width : 100px; height : 100px; background : #167567;">
</view>

//js
Page({
  handletouchmove: function(event) {
    console.log(event)
  },
})

When you press and hold the view label and slide the mouse, the sliding event will be triggered continuously until you release the mouse. When the mouse moves out of the view label Event will still be triggered after the area is reached.

Drag operation

By listening to sliding events, some practical functions can be implemented. For example, users who have used iPhone know assistivetouch, a shortcut button on the desktop, which can drag the button to Anywhere on the desktop. For convenience, a circle is used to represent the button.

//wxml
<view id="id" class = "ball" bindtouchmove="handletouchmove" style = "width : 60px; height : 60px; background : #545345;">
</view>

//wxss
.ball {
  box-shadow:2px 2px 10px #AAA;
  border-radius: 20px;
  position: absolute; 
}

//js
Page({
  handletouchmove: function(event) {
    console.log(event)
  },
})

Basics of Mini Program Development: Sliding Operation (10)

View Follow


Okay, the button is a bit ugly, that’s not the point. The implementation idea of ​​drag and drop operation is also very simple. When a sliding event is triggered, the event object will contain the coordinate information of the current touch position, which can be passed through event.touches[0].pageX and event.touches [0].pageY to get why touches is an array. The answer is to support multi-touch (I don’t know how to simulate multi-touch on the computer). Next, set the button's position to the touch position, which should achieve the desired effect. Let's give it a try.

Define the button's position data ballBottom and ballRight in the Page and bind them to the corresponding properties of the view.

//wxml
<view id="id" class = "ball" bindtouchmove="handletouchmove" style = "width : 60px; height : 60px; background : #545345; top:{{ballTop}}px; left: {{ballLeft}}px">
</view>

//js
Page({
  data: {
    ballTop: 0,
    ballLeft: 0,
  },
  handletouchmove: function(event) {
    console.log(event)
  },
})

Next, update the position data of the button in the handletouchmove method

handletouchmove: function(event) {
  console.log(event)
  this.setData ({
    ballTop: event.touches[0].pageY,
    ballLeft: event.touches[0].pageX,
  });
},

It is found that the effect can be basically achieved, but there are two problems. One is that the button will be dragged out of the edge of the screen, and the second button is always at the bottom right of the mouse.
Next, add judgment on the screen boundaries and correct the button position. The screen size can be obtained through wx.getSystemInfo.
The complete code is as follows:

Page({
  data: {
    ballTop: 0,
    ballLeft: 0,
    screenHeight:0,
    screenWidth:0

  },
  onLoad: function () {
      //获取屏幕宽高
    var _this = this;
    wx.getSystemInfo({
     success: function (res) {
        _this.setData({
          screenHeight: res.windowHeight,
          screenWidth: res.windowWidth,
        });
      }
    });
  },
  handletouchmove: function(event) {
    console.log(event)
    let pageX = event.touches[0].pageX;
    let pageY = event.touches[0].pageY;
    //屏幕边界判断
    if (pageX < 30 || pageY < 30)
      return;
    if (pageX > this.data.screenWidth - 30)
      return;
    if (pageY > this.data.screenHeight - 30)
      return;
    this.setData ({
      ballTop: event.touches[0].pageY - 30,
      ballLeft: event.touches[0].pageX - 30,
    });
  },
})

Run it again, everything is ok.

Gesture recognition

Various gesture operations can be recognized by processing sliding operations, such as left and right sliding, etc. The idea is also very simple, just bind the touchstart and touchmove events, and then identify and calculate the coordinate information (for example, current.PageX - last.PageX

//wxml
<view id="id" class = "ball" bindtap = "handletap" bindtouchstart = "handletouchtart" bindtouchmove="handletouchmove" style = "width : 100%px; height : 40px;">
{{text}}
</view>

//js
Page({
  data: {
    lastX: 0,
    lastY: 0,
    text : "没有滑动",
  },
  handletouchmove: function(event) {
    console.log(event)
    let currentX = event.touches[0].pageX
    let currentY = event.touches[0].pageY

    console.log(currentX)
    console.log(this.data.lastX)
    let text = ""
    if ((currentX - this.data.lastX) < 0)
      text = "向左滑动"
    else if (((currentX - this.data.lastX) > 0))
      text = "向右滑动"

    //将当前坐标进行保存以进行下一次计算
    this.data.lastX = currentX
    this.data.lastY = currentY
    this.setData({
      text : text,
    });
  },

  handletouchtart:function(event) { 
    console.log(event)
    this.data.lastX = event.touches[0].pageX
    this.data.lastY = event.touches[0].pageY
  },
  handletap:function(event) {
    console.log(event)
  },
})

Run the program , when sliding to the left, view will display "Swipe to the left", and the same applies to the right.

Identify left and right sliding and up and down interactions at the same time
Sometimes you want to recognize left and right sliding and up and down sliding at the same time. You can compare the difference on the X-axis with the difference on the Y-axis. The larger difference is the sliding direction.

 handletouchmove: function(event) {
    console.log(event)
    let currentX = event.touches[0].pageX
    let currentY = event.touches[0].pageY
    let tx = currentX - this.data.lastX
    let ty = currentY - this.data.lastY
    let text = ""
    //左右方向滑动
    if (Math.abs(tx) > Math.abs(ty)) {
      if (tx < 0)
        text = "向左滑动"
      else if (tx > 0)
        text = "向右滑动"
    }
    //上下方向滑动
    else {
      if (ty < 0)
        text = "向上滑动"
      else if (ty > 0)
        text = "向下滑动"
    }

    //将当前坐标进行保存以进行下一次计算
    this.data.lastX = currentX
    this.data.lastY = currentY
    this.setData({
      text : text,
    });
  },

In actual applications, when a certain gesture is triggered, the gesture will be recognized until the user releases the mouse or finger. For example, when the user triggers the left swipe gesture and then swipes down, the user still has to follow the left swipe gesture.
You can define a mark to record the first recognized gesture. If the gesture has been recognized, subsequent sliding operations can be ignored until the user releases the mouse or finger. Release the mouse or finger operation can be handled by binding the handletouchend event.

Page({
  data: {
    lastX: 0,
    lastY: 0,
    text : "没有滑动",
    currentGesture: 0,
  },
  handletouchmove: function(event) {
    console.log(event)
    if (this.data.currentGesture != 0){
      return
    }
    let currentX = event.touches[0].pageX
    let currentY = event.touches[0].pageY
    let tx = currentX - this.data.lastX
    let ty = currentY - this.data.lastY
    let text = ""
    //左右方向滑动
    if (Math.abs(tx) > Math.abs(ty)) {
      if (tx < 0) {
        text = "向左滑动"
        this.data.currentGesture = 1
      }
      else if (tx > 0) {
        text = "向右滑动"
        this.data.currentGesture = 2
      }

    }
    //上下方向滑动
    else {
      if (ty < 0){
        text = "向上滑动"
        this.data.currentGesture = 3

      }
      else if (ty > 0) {
        text = "向下滑动"
        this.data.currentGesture = 4
      }

    }

    //将当前坐标进行保存以进行下一次计算
    this.data.lastX = currentX
    this.data.lastY = currentY
    this.setData({
      text : text,
    });
  },

  handletouchtart:function(event) { 
    console.log(event)
    this.data.lastX = event.touches[0].pageX
    this.data.lastY = event.touches[0].pageY
  },
  handletouchend:function(event) {
    console.log(event)
    this.data.currentGesture = 0
    this.setData({
      text : "没有滑动",
    });
  },
})

Multi-touch control
Since multi-touch control requires a real machine to test, and my appid is still being applied for, I can only postpone the explanation. Here is a general idea. For example, the operation of opening your fingers can determine the moving direction of the two touch points respectively. For example, the touch point on the left slides to the left, and the touch point on the right slides to the right, that is, It can be judged as a finger spread operation.

The above is the detailed content of Basics of Mini Program Development: Sliding Operation (10). For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
PHP在小程序开发中的页面跳转与路由管理PHP在小程序开发中的页面跳转与路由管理Jul 04, 2023 pm 01:15 PM

PHP在小程序开发中的页面跳转与路由管理随着小程序的快速发展,越来越多的开发者开始将PHP与小程序开发相结合。在小程序开发中,页面跳转和路由管理是非常重要的一部分,它能够帮助开发者实现页面之间的切换和导航操作。PHP作为一种常用的服务器端编程语言,可以很好地与小程序进行交互和数据传递,下面我们来详细了解一下PHP在小程序中的页面跳转与路由管理。一、页面跳转基

如何在uniapp中实现小程序开发和发布如何在uniapp中实现小程序开发和发布Oct 20, 2023 am 11:33 AM

如何在uni-app中实现小程序开发和发布随着移动互联网的发展,小程序成为了移动应用开发的一个重要方向。而uni-app作为一个跨平台的开发框架,可以同时支持多个小程序平台的开发,如微信、支付宝、百度等。下面将详细介绍如何使用uni-app开发和发布小程序,并提供一些具体的代码示例。一、小程序开发前准备在开始使用uni-app开发小程序之前,需要做一些准备工

小程序开发中的PHP权限管理与用户角色设定小程序开发中的PHP权限管理与用户角色设定Jul 04, 2023 pm 04:48 PM

小程序开发中的PHP权限管理与用户角色设定随着小程序的普及和应用范围的扩大,用户对于小程序的功能和安全性提出了更高的要求,其中权限管理和用户角色设定是保证小程序安全性的重要一环。在小程序中使用PHP进行权限管理和用户角色设定能够有效地保护用户的数据和隐私,下面将介绍如何实现这一功能。一、权限管理的实现权限管理是指根据用户的身份和角色,授予不同的操作权限。在小

小程序开发中的PHP数据缓存与缓存策略小程序开发中的PHP数据缓存与缓存策略Jul 05, 2023 pm 02:57 PM

小程序开发中的PHP数据缓存与缓存策略随着小程序的快速发展,更多的开发者开始关注如何提高小程序的性能和响应速度。其中一个重要的优化手段就是使用数据缓存来减少对数据库和外部接口的频繁访问。而在PHP中,我们可以利用各种缓存策略来实现数据缓存。本文将介绍PHP中的数据缓存原理,并提供几个常见的缓存策略的示例代码。一、数据缓存原理数据缓存是指将数据存放在内存中,以

小程序开发中的PHP安全防护与攻击防范小程序开发中的PHP安全防护与攻击防范Jul 07, 2023 am 08:55 AM

小程序开发中的PHP安全防护与攻击防范随着移动互联网的迅猛发展,小程序成为了人们生活中重要的一部分。而PHP作为一种强大而灵活的后端开发语言,也被广泛应用于小程序的开发中。然而,安全问题一直是程序开发中需要重视的方面。本文将重点介绍小程序开发中PHP的安全防护与攻击防范,同时提供一些代码示例。XSS(跨站脚本攻击)防范XSS攻击是指黑客通过向网页注入恶意脚本

微信小程序中PHP开发的下拉菜单实现方法微信小程序中PHP开发的下拉菜单实现方法Jun 04, 2023 am 10:31 AM

今天我们来学习一下微信小程序中PHP开发的下拉菜单实现方法。微信小程序是一种轻量级的应用程序,用户可以在微信里直接使用,而且不需要下载安装,非常方便。而PHP是一种非常流行的后端编程语言,也是与微信小程序配合很好的一种语言。下面我们就来看看如何在微信小程序中使用PHP开发下拉菜单。首先,我们需要准备好开发环境,包括PHP、微信小程序开发工具和服务器。然后我们

小程序开发中的PHP页面动画效果与交互设计小程序开发中的PHP页面动画效果与交互设计Jul 04, 2023 pm 11:01 PM

小程序开发中的PHP页面动画效果与交互设计导语:小程序是一种在移动设备上运行的应用程序,能够提供类似原生应用的体验。而在小程序开发中,PHP作为一种常用的后端语言,可以为小程序页面增添动画效果与交互设计。本文将介绍一些常用的PHP页面动画效果与交互设计,并附上代码示例。一、CSS3动画CSS3提供了丰富的属性和方法,用于实现各种动画效果。而在小

小程序开发中的PHP错误处理与异常日志记录小程序开发中的PHP错误处理与异常日志记录Jul 04, 2023 am 11:16 AM

小程序开发中的PHP错误处理与异常日志记录随着小程序的不断普及,越来越多的开发人员开始使用PHP语言来开发小程序后台。在开发过程中,错误处理和异常日志记录是至关重要的。本文将介绍在小程序开发中如何处理PHP错误和记录异常日志,并给出相应的代码示例。一、PHP错误处理错误报告设置在PHP中,我们可以通过修改error_reporting和display_err

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool