微信小程序实现拖拽的小球

        

目录

前言 

js 

获取微信小程序中获取系统信息

触摸移动事件的处理函数

触摸结束事件的处理函数

 用于监听页面滚动事件

全局参数 

html

CSS


前言 

小程序开发提供了丰富的API和事件处理函数,使得开发者可以方便地实现各种交互功能。其中,拖拽功能是一个在许多应用场景中常见的需求,例如拖拽按钮、拖拽图片等。本文将介绍一个小程序页面中实现拖拽移动元素的功能的代码示例,并解析其实现原理。

js 

这段代码主要是一个小程序页面中实现了拖拽移动元素的功能。具体解释如下:

  1. getSysdata 函数:该函数使用 wx.getSystemInfo 方法获取系统的相关信息,如窗口宽度和高度,并将其存储到 that.data.window 数组中。之后根据一定的比例计算出一个定位值 write,再通过 that.setData 方法将 write 设置为页面的数据,在回调函数中使用 wx.createSelectorQuery 方法获取元素的宽度和高度,存储到 that.data.writesize 数组中。

  2. touchmove 函数:该函数是拖拽过程中触发的事件处理函数。通过获取触摸点的坐标减去元素宽度和高度的一半,再减去页面的滚动距离,得到当前元素的位置。然后判断该位置是否超出屏幕范围,如果超出则将位置设置为边界值。最后通过 that.setData 方法将最新的位置信息存储到页面数据中。

  3. onPageScroll 函数:该函数用于监听页面滚动事件,并将滚动距离存储到 this.data.scrolltop 中。

  4. touchend 函数:该函数是拖拽结束时触发的事件处理函数。首先获取当前元素的位置和窗口的宽度、高度以及元素的大小。如果当前位置在屏幕的左、右、上、下边缘处,则直接返回,不执行回到边缘的逻辑。否则,通过计算最近的水平边缘和垂直边缘的位置,并判断最近的边缘是水平边缘还是垂直边缘,将元素位置设置为最近边缘的位置。最后通过 that.setData 方法将最新的位置信息存储到页面数据中。

获取微信小程序中获取系统信息

这段代码是一个小程序(微信小程序)中的 JavaScript 代码段,用于获取系统信息和元素尺寸,并做一些相关的计算和操作。具体来说,它执行以下操作:

  1. 首先,定义了一个函数 getSysdata,这个函数似乎是用来获取系统信息和元素尺寸的。

  2. 在函数内部,通过调用 wx.getSystemInfo 函数来获取系统信息。这个函数的结果会在 success 回调函数中被处理。

  3. 在 success 回调函数中,将获取到的系统窗口宽高(windowWidth 和 windowHeight)存储在 that.data.window 数组中。

  4. 接下来,根据一定的逻辑计算得到一个名为 write 的数组,其中 write[0] 是系统窗口宽度的某个百分比(that.data.writePosition[0])以像素为单位的值,而 write[1] 则是系统窗口高度的某个百分比(that.data.writePosition[1])以像素为单位的值。

  5. 使用 that.setData 函数来更新小程序的数据,将 write 数组设置为新的数据。在这里还提供了一个回调函数,在这个回调函数中执行如下操作:

    • 使用 wx.createSelectorQuery() 创建一个查询对象。
    • 使用 .select(".kefuBtn") 选择页面中类名为 .kefuBtn 的元素。
    • 调用 .boundingClientRect 方法获取该元素的宽度和高度,并将结果存储在 that.data.writesize 数组中。
    • 最后,通过调用 .exec() 执行上述查询操作。

总之,这段代码用于在微信小程序中获取系统信息(窗口尺寸)和特定元素的尺寸,并进行一些相关的计算和操作,可能是为了适应不同尺寸的设备和显示效果。

getSysdata: function () {var that = this;wx.getSystemInfo({success: function (e) {that.data.window = [e.windowWidth, e.windowHeight];var write = [];write[0] = (that.data.window[0] * that.data.writePosition[0]) / 100;write[1] = (that.data.window[1] * that.data.writePosition[1]) / 100;console.log(write, 45);that.setData({write: write,},function () {// 获取元素宽高wx.createSelectorQuery().select(".kefuBtn").boundingClientRect(function (res) {console.log(res.width);that.data.writesize = [res.width, res.height];}).exec();});},fail: function (e) {console.log(e);},});},

触摸移动事件的处理函数

这段代码是一个用来处理触摸移动事件的函数。当用户在页面上进行触摸移动操作时,该函数会被触发。

代码中的各个部分的功能如下所示:

  1. 首先,通过var that = this;将当前上下文的this对象赋值给变量that,以确保在后续的代码中能够正确访问到页面的数据。

  2. 然后,通过e.touches[0].pageXe.touches[0].pageY获取当前触摸点相对于页面的水平和垂直位置,并将其分别存储在数组position的第一个和第二个元素中。同时,通过减去写作框的宽度的一半(that.data.writesize[0] / 2)和减去垂直滚动的偏移量(this.data.scrolltop)来调整写作框的中心位置。

  3. 接下来,通过that.data.window[0]that.data.window[1]分别获取屏幕的宽度和高度,以便后续判断写作框是否超出屏幕范围。

  4. 使用条件语句判断写作框的水平和垂直位置是否超出屏幕范围。如果水平位置小于0,则将其设为0,以保证写作框不会超出屏幕左侧边界。如果水平位置大于屏幕宽度减去写作框宽度,则将其设为屏幕宽度减去写作框宽度,以保证写作框不会超出屏幕右侧边界。对于垂直位置,也进行了类似的判断和限制。

  5. 最后,通过that.setData()方法将更新后的写作框位置应用到页面上,即将position赋值给write,以使得写作框显示在调整后的位置上。

综上所述,这段代码的主要功能是根据用户的触摸移动操作来调整写作框的位置,并保证写作框不会超出屏幕范围。

  //开始拖拽touchmove: function (e) {var that = this;var position = [e.touches[0].pageX - that.data.writesize[0] / 2,e.touches[0].pageY - that.data.writesize[1] / 2 - this.data.scrolltop,];// 获取屏幕宽高var windowWidth = that.data.window[0];var windowHeight = that.data.window[1];// 判断是否超出屏幕范围if (position[0] < 0) {position[0] = 0;} else if (position[0] > windowWidth - that.data.writesize[0]) {position[0] = windowWidth - that.data.writesize[0];}if (position[1] < 0) {position[1] = 0;} else if (position[1] > windowHeight - that.data.writesize[1]) {position[1] = windowHeight - that.data.writesize[1];}that.setData({write: position,});

触摸结束事件的处理函数

这段代码是一个用于处理触摸结束事件的函数。在移动设备的触摸屏上,当用户的手指从屏幕上抬起时,会触发这个事件。代码的目的是确保用户在写字过程中,当触摸结束时,字的位置会自动靠近最近的屏幕边缘。

具体的步骤如下:

  1. 通过touchend事件处理函数来执行以下操作。

  2. 从事件对象中获取当前写字的位置,这个位置信息保存在position变量中。

  3. 获取屏幕的宽度和高度,并将它们分别保存在windowWidthwindowHeight变量中。

  4. 获取写字区域的尺寸,这个尺寸信息保存在writesize变量中。

  5. 如果当前写字位置已经在屏幕的左、右边缘或上、下边缘,那么直接返回,不执行后续的将位置回到边缘的逻辑。

  6. 如果当前写字位置不在边缘,那么计算离当前位置最近的水平边缘和垂直边缘。

  7. 判断最近的边缘是水平边缘还是垂直边缘,通过比较写字位置与屏幕中心的距离来决定。

  8. 如果最近的边缘是水平边缘,将写字位置的水平坐标设置为最近水平边缘的值,使得字能够贴近水平边缘。

  9. 如果最近的边缘是垂直边缘,将写字位置的垂直坐标设置为最近垂直边缘的值,使得字能够贴近垂直边缘。

  10. 最后,更新写字位置的数据,将位置信息设置为回到边缘后的位置。

总之,这段代码的作用是确保在用户停止触摸屏幕后,写字位置会自动靠近离它最近的屏幕边缘,从而使得写字的体验更加舒适和方便。

  touchend: function (e) {var that = this;var position = that.data.write;var windowWidth = that.data.window[0];var windowHeight = that.data.window[1];var writesize = that.data.writesize;// 如果位置在屏幕左、右边缘或上、下边缘,直接返回,不执行回到边缘的逻辑if (position[0] === 0 ||position[0] === windowWidth - writesize[0] ||position[1] === 0 ||position[1] === windowHeight - writesize[1]) {return;}// 如果位置不是边缘,则自动回到最近的边缘var closestHorizontalEdge =Math.abs(position[0] - windowWidth / 2) < Math.abs(position[0])? windowWidth - writesize[0]: 0;var closestVerticalEdge =Math.abs(position[1] - windowHeight / 2) < Math.abs(position[1])? windowHeight - writesize[1]: 0;// 检查最近的边缘是水平边缘还是垂直边缘if (Math.abs(closestHorizontalEdge - position[0]) <Math.abs(closestVerticalEdge - position[1])) {position[0] = closestHorizontalEdge;} else {position[1] = closestVerticalEdge;}that.setData({write: position,});},

 用于监听页面滚动事件

onPageScroll 函数:该函数用于监听页面滚动事件,并将滚动距离存储到 this.data.scrolltop 中。 

  onPageScroll(e) {this.data.scrolltop = e.scrollTop;},

全局参数 

  data: {// 拖拽参数writePosition: [85, 35], //默认定位参数writesize: [0, 0], // 元素大小window: [0, 0], //屏幕尺寸write: [0, 0], //定位参数scrolltop: 0, //据顶部距离},

html
 

这段代码是一个 HTML 的按钮元素,在页面上显示为一个按钮图标。按钮具有以下特性和功能:

  • open-type="contact":表示按钮的点击行为,当点击按钮时,会打开客服对话框,用户可以与客服进行沟通。
  • bindtouchmove="touchmove"、catch:touchmove:表示当按钮被触摸移动时触发 touchmove 方法,这个方法可能是由程序定义和实现的。
  • style="left:{{write[0]}}px;top:{{write[1]}}px;":表示按钮的定位样式,left 和 top 样式用于指定按钮的水平和垂直位置。{{write[0]}} 和 {{write[1]}} 是可能由程序动态设置的变量。
  • catch:touchend="touchend":表示当按钮触摸结束时触发 touchend 方法,这个方法可能是由程序定义和实现的。
<button class='kefuBtn' open-type="contact"  bindtouchmove="touchmove" catch:touchmove style="left:{{write[0]}}px;top:{{write[1]}}px;" catch:touchend="touchend"><image class="kefu" src="../../iimage/kefu.png" />
</button>

CSS

.kefuBtn {position: absolute;background-color: transparent;border: none;outline: none;background: #fff !important;border-radius: 0rpx;padding: 0rpx;margin: 0rpx;display: inline-block;line-height: 1;width: 112rpx !important;height: 112rpx !important;border-radius: 50%;box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15)
}button::after {/*button的边框样式是通过::after方式实现的*/border: none;
}.kefuBtn image {width: 112rpx;height: 112rpx;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/42007.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

无涯教程-Perl - tell函数

描述 此函数返回指定FILEHANDLE中读取指针的当前位置(以字节为单位)。如果省略FILEHANDLE,则它将返回上次访问的文件中的位置。 语法 以下是此函数的简单语法- tell FILEHANDLEtell返回值 此函数以字节为单位返回当前文件位置。 例 以下是显示其基本用法的示例代码,要检…

leetcode473. 火柴拼正方形(回溯算法-java)

火柴拼正方形 leetcode473 火柴拼正方形题目描述回溯算法 上期经典算法 leetcode473 火柴拼正方形 难度 - 中等 原题链接 - leetcode473 火柴拼正方形 题目描述 你将得到一个整数数组 matchsticks &#xff0c;其中 matchsticks[i] 是第 i 个火柴棒的长度。你要用 所有的火柴棍…

BC119 小乐乐与字符串

描述 在庆祝祖国母亲70华诞之际&#xff0c;老师给小乐乐出了一个问题。大家都知道China的英文缩写是CHN&#xff0c;那么给你一个字符串s&#xff0c;你需要做的是统计s中子序列“CHN”的个数。子序列的定义&#xff1a;存在任意下标a < b < c&#xff0c;那么“s[a]s[b…

微服务—Eureka注册中心

eureka相当于是一个公司的管理人事HR,各部门之间如果有合作时&#xff0c;由HR进行人员的分配以及调度&#xff0c;具体选哪个人&#xff0c;全凭HR的心情&#xff0c;如果你这个部门存在没有意义&#xff0c;直接把你这个部门撤销&#xff0c;全体人员裁掉&#xff0c;所以不想…

计算机网络笔记

TCP有连接可靠服务 TCP特点&#xff1a; 1.TCP是面向连接的传输层协议&#xff1b; 2.每条TCP连接只能有两个端点&#xff0c;每条TCP连接是一对一的&#xff1b; 3.TCP提供可靠交付&#xff0c;保证传送数据无差错&#xff0c;不丢失&#xff0c;不重复且有序&#xff1b; 4.…

Android Studio瀑布流实现

效果&#xff1a; ImageDetail class package com.example.waterfallflow; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.widget.ImageView;public class ImageDetail extends Activity{Overrideprotected void …

DNNGP、DeepGS 和 DLGWAS模型构成对比

一、DNNGP DNNGP 是基于深度卷积神经网络&#xff0c;这个结构包括一个输入层&#xff0c;三个卷积层&#xff0c;一个批标准化层&#xff0c;两个dropout层&#xff0c;一个平坦化层&#xff0c;一个 dense层。 dropout层&#xff1a;在神经网络中,dropout层是一个非常有效的正…

信息与通信工程面试准备——数学知识|正态分布|中心极限定理

目录 正态分布 正态分布的参数 正态分布的第一个参数是均值 正态分布的第二个参数是标准差SD 所有正态分布的共同特征 标准正态分布&#xff1a;正态分布的特例 中心极限定理 理解定义 示例# 1 示例# 2 知道样本均值总是正态分布的实际含义是什么&#xff1f; 正态分…

Scala 如何调试隐式转换--隐式转换代码的显示展示

方法1 在需要隐式转换的地方&#xff0c;把需要的参数显示的写出。 略方法2&#xff0c;查看编译代码 在terminal中 利用 scalac -Xprint:typer xxx.scala方法打印添加了隐式值的代码示例。 对于复杂的工程来说&#xff0c;直接跑到terminal执行 scalac -Xprint:typer xxx.…

JVM——类文件结构

文章目录 一 概述二 Class 文件结构总结2.1 魔数2.2 Class 文件版本2.3 常量池2.4 访问标志2.5 当前类索引,父类索引与接口索引集合2.6 字段表集合2.7 方法表集合2.8 属性表集合 一 概述 在 Java 中&#xff0c;JVM 可以理解的代码就叫做字节码&#xff08;即扩展名为 .class …

winform 封装unity web player 用户控件

环境&#xff1a; VS2015Unity 5.3.6f1 (64-bit) 目的&#xff1a; Unity官方提供的UnityWebPlayer控件在嵌入Winform时要求读取的.unity3d文件路径&#xff08;Src&#xff09;必须是绝对路径&#xff0c;如果移动代码到另一台电脑&#xff0c;需要重新修改src。于是考虑使…

elementUI 的上传组件<el-upload>,自定义上传按钮样式

方法一&#xff1a; 原理&#xff1a;调用<el-upload>组件的方法唤起选择文件事件 效果&#xff1a; 页面代码&#xff1a; 1、选择图片按钮 <div class"flex_row_spacebetween btn" click"chooseImg"><span class"el-icon-plus ic…

matlab机器人工具箱基础使用

资料&#xff1a;https://blog.csdn.net/huangjunsheng123/article/details/110630665 用vscode直接看工具箱api代码比较方便&#xff0c;代码说明很多 一、模型设置 1、基础效果 %采用机器人工具箱进行正逆运动学验证 a[0,-0.3,-0.3,0,0,0];%DH参数 d[0.05,0,0,0.06,0.05,…

教育行业软文怎么写,媒介盒子无偿分享

随着产业升级和技术变革、信息的智能化、数字化发展&#xff0c;也为教育行业带来了新的增长点&#xff0c;在线教育课程类型丰富多元&#xff0c;新课程不断涌现。在激烈的市场竞争环境下&#xff0c;教育机构如何根据市场实行差异化战略并加强自身品牌建成为挑战。 如今&…

微服务-Ribbon(负载均衡)

负载均衡的面对多个相同的服务的时候&#xff0c;我们选择一定的策略去选择一个服务进行 负载均衡流程 Ribbon结构组成 负载均衡策略 RoundRobinRule&#xff1a;简单的轮询服务列表来选择服务器AvailabilityFilteringRule 对两种情况服务器进行忽略&#xff1a; 1.在默认情…

Php“牵手”拼多多商品详情页数据采集方法,拼多多API接口申请指南

拼多多详情接口 API 是开放平台提供的一种 API 接口&#xff0c;它可以帮助开发者获取商品的详细信息&#xff0c;包括商品的标题、描述、图片等信息。在电商平台的开发中&#xff0c;详情接口API是非常常用的 API&#xff0c;因此本文将详细介绍详情接口 API 的使用。 一、拼…

315官方点赞!多燕瘦或将成酵素选购唯一标准

食用酵素及其衍生产品&#xff0c;是近年来国内主流电商平台的主要增长类目之一。在全球范围内&#xff0c;酵素的流行由来已久&#xff0c;其中在日本、北美、欧洲等发达国家和地区尤为风靡。据不完全统计&#xff1a;欧洲酵素市场规模约占全球酵素市场份额的40%以上&#xff…

【Linux】一切皆文件

Linux 下一切皆为文件&#xff0c; 文件包括头文件&#xff0c;库文件&#xff08;静态库和共享库&#xff09;&#xff0c;可执行文件&#xff0c;目录文件&#xff0c;软链接文件&#xff0c;配置文件等。 每个文件都依据权限分为用户、用户组和其他人三个身份&#xff0c;…

webpack相关面试

运行 npm run xxx 的时候发生了什么&#xff1f; npm run xxx的时候&#xff0c;首先会去项目的package.json文件里找scripts 里找对应的xxx&#xff0c;然后执行 xxx的命令 npm i 的时候&#xff0c;npm 读到该配置后&#xff0c;就将该文件软链接到 ./node_modules/.bin 目录…

vscode conda activate激活环境出错

vscode conda activate 出错 conda-script.py: error: argument COMMAND: invalid choice: ‘activate’ To initialize your shell, run$ conda init <SHELL_NAME>Currently supported shells are:- bash- fish- tcsh- xonsh- zsh- powershellSee conda init --help f…