兰州最大网络公司,八方资源网做网站优化怎么样,网站app制作,找大学生做网站要多少钱目录 前言
js
获取微信小程序中获取系统信息
触摸移动事件的处理函数
触摸结束事件的处理函数 用于监听页面滚动事件
全局参数
html
CSS 前言 小程序开发提供了丰富的API和事件处理函数#xff0c;使得开发者可以方便地实现各种交互功能。其中#xff0c;拖拽功能…
目录 前言
js
获取微信小程序中获取系统信息
触摸移动事件的处理函数
触摸结束事件的处理函数 用于监听页面滚动事件
全局参数
html
CSS 前言 小程序开发提供了丰富的API和事件处理函数使得开发者可以方便地实现各种交互功能。其中拖拽功能是一个在许多应用场景中常见的需求例如拖拽按钮、拖拽图片等。本文将介绍一个小程序页面中实现拖拽移动元素的功能的代码示例并解析其实现原理。 js
这段代码主要是一个小程序页面中实现了拖拽移动元素的功能。具体解释如下 getSysdata 函数该函数使用 wx.getSystemInfo 方法获取系统的相关信息如窗口宽度和高度并将其存储到 that.data.window 数组中。之后根据一定的比例计算出一个定位值 write再通过 that.setData 方法将 write 设置为页面的数据在回调函数中使用 wx.createSelectorQuery 方法获取元素的宽度和高度存储到 that.data.writesize 数组中。 touchmove 函数该函数是拖拽过程中触发的事件处理函数。通过获取触摸点的坐标减去元素宽度和高度的一半再减去页面的滚动距离得到当前元素的位置。然后判断该位置是否超出屏幕范围如果超出则将位置设置为边界值。最后通过 that.setData 方法将最新的位置信息存储到页面数据中。 onPageScroll 函数该函数用于监听页面滚动事件并将滚动距离存储到 this.data.scrolltop 中。 touchend 函数该函数是拖拽结束时触发的事件处理函数。首先获取当前元素的位置和窗口的宽度、高度以及元素的大小。如果当前位置在屏幕的左、右、上、下边缘处则直接返回不执行回到边缘的逻辑。否则通过计算最近的水平边缘和垂直边缘的位置并判断最近的边缘是水平边缘还是垂直边缘将元素位置设置为最近边缘的位置。最后通过 that.setData 方法将最新的位置信息存储到页面数据中。
获取微信小程序中获取系统信息
这段代码是一个小程序微信小程序中的 JavaScript 代码段用于获取系统信息和元素尺寸并做一些相关的计算和操作。具体来说它执行以下操作 首先定义了一个函数 getSysdata这个函数似乎是用来获取系统信息和元素尺寸的。 在函数内部通过调用 wx.getSystemInfo 函数来获取系统信息。这个函数的结果会在 success 回调函数中被处理。 在 success 回调函数中将获取到的系统窗口宽高windowWidth 和 windowHeight存储在 that.data.window 数组中。 接下来根据一定的逻辑计算得到一个名为 write 的数组其中 write[0] 是系统窗口宽度的某个百分比that.data.writePosition[0]以像素为单位的值而 write[1] 则是系统窗口高度的某个百分比that.data.writePosition[1]以像素为单位的值。 使用 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);},});},
触摸移动事件的处理函数
这段代码是一个用来处理触摸移动事件的函数。当用户在页面上进行触摸移动操作时该函数会被触发。
代码中的各个部分的功能如下所示 首先通过var that this;将当前上下文的this对象赋值给变量that以确保在后续的代码中能够正确访问到页面的数据。 然后通过e.touches[0].pageX和e.touches[0].pageY获取当前触摸点相对于页面的水平和垂直位置并将其分别存储在数组position的第一个和第二个元素中。同时通过减去写作框的宽度的一半that.data.writesize[0] / 2和减去垂直滚动的偏移量this.data.scrolltop来调整写作框的中心位置。 接下来通过that.data.window[0]和that.data.window[1]分别获取屏幕的宽度和高度以便后续判断写作框是否超出屏幕范围。 使用条件语句判断写作框的水平和垂直位置是否超出屏幕范围。如果水平位置小于0则将其设为0以保证写作框不会超出屏幕左侧边界。如果水平位置大于屏幕宽度减去写作框宽度则将其设为屏幕宽度减去写作框宽度以保证写作框不会超出屏幕右侧边界。对于垂直位置也进行了类似的判断和限制。 最后通过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,});
触摸结束事件的处理函数
这段代码是一个用于处理触摸结束事件的函数。在移动设备的触摸屏上当用户的手指从屏幕上抬起时会触发这个事件。代码的目的是确保用户在写字过程中当触摸结束时字的位置会自动靠近最近的屏幕边缘。
具体的步骤如下 通过touchend事件处理函数来执行以下操作。 从事件对象中获取当前写字的位置这个位置信息保存在position变量中。 获取屏幕的宽度和高度并将它们分别保存在windowWidth和windowHeight变量中。 获取写字区域的尺寸这个尺寸信息保存在writesize变量中。 如果当前写字位置已经在屏幕的左、右边缘或上、下边缘那么直接返回不执行后续的将位置回到边缘的逻辑。 如果当前写字位置不在边缘那么计算离当前位置最近的水平边缘和垂直边缘。 判断最近的边缘是水平边缘还是垂直边缘通过比较写字位置与屏幕中心的距离来决定。 如果最近的边缘是水平边缘将写字位置的水平坐标设置为最近水平边缘的值使得字能够贴近水平边缘。 如果最近的边缘是垂直边缘将写字位置的垂直坐标设置为最近垂直边缘的值使得字能够贴近垂直边缘。 最后更新写字位置的数据将位置信息设置为回到边缘后的位置。
总之这段代码的作用是确保在用户停止触摸屏幕后写字位置会自动靠近离它最近的屏幕边缘从而使得写字的体验更加舒适和方便。 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-typecontact表示按钮的点击行为当点击按钮时会打开客服对话框用户可以与客服进行沟通。bindtouchmovetouchmove、catch:touchmove表示当按钮被触摸移动时触发 touchmove 方法这个方法可能是由程序定义和实现的。styleleft:{{write[0]}}px;top:{{write[1]}}px;表示按钮的定位样式left 和 top 样式用于指定按钮的水平和垂直位置。{{write[0]}} 和 {{write[1]}} 是可能由程序动态设置的变量。catch:touchendtouchend表示当按钮触摸结束时触发 touchend 方法这个方法可能是由程序定义和实现的。
button classkefuBtn open-typecontact bindtouchmovetouchmove catch:touchmove styleleft:{{write[0]}}px;top:{{write[1]}}px; catch:touchendtouchendimage classkefu 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;
}
