草庐IT

微信小程序 实现最简单的组件拖拽

C++Linese 2023-04-24 原文

背景

最近在自主学习微信小程序的开发；对于零基础入门(没有学习过前端)的我，查阅了许多微信小程序拖拽的实现，大部分要么实现起来太复杂了，要么封装组件太复杂了，附带了拖拽之后排序等功能；因此写下这篇个人觉得最好理解的 微信小程序元素拖拽的实现；

原理

这边采用了 微信小程序中的 bindtouchstart、bindtouchmove、bindtouchend 三兄弟 实现 开始触摸、触摸后移动、触摸结束；并加上一些坐标的转换，实现简单的 拖动功能；

第一步 touchStart

拖拽的开始 (一切尽在图中)

控件的位置为 left:posX; top:posY;

通过bindtouchstart 得到首次的触摸点坐标：touch.pageY;touch.pageX;

此时 可以得到 触摸点和 控制的位置坐标差为

chaX = touch.pageX - posX;

chaY = touch.pageY - posY;

将这两个值 暂存；用于拖动的后 位置的转换；

第二步 toucMove

通过bindtouchmove 可以得到 触摸移动的实时坐标：touch.pageY;touch.pageX;

然后通过刚刚得到chaX 和 chaY 可以转换得到 实时移动的控件位置：

new_posX = touch.pageX - chaX;
new_posY = touch.pageY - chaY;

将这两个值都更新至 控件的位置信息上；此时 可以实时渲染出 控件的移动；

第三步 touchEnd

通过bindtouchend 用于处理 拖拽动作的结束，清空临时数据等；

代码

WXML 代码

  • position: absolute; 绝对位置 用于left 和 top的使用
  • left:{{posX}}px; 显示的位置X
  • top:{{posY}}px; 显示的位置Y
  • bindtouchstart=“touchStart” 设置绑定的函数
  • bindtouchmove=“touchMove” 设置绑定的函数
  • bindtouchend=“touchEnd” 设置绑定的函数
  • 其余元素只是为了控件展示
<view class="stick" style="position: absolute; text-align: center; width: 200rpx; height:50rpx;background: rgb(100, 180, 100);display: block;left:{{posX}}px;top:{{posY}}px" bindtouchmove="touchMove" bindtouchstart="touchStart" bindtouchend="touchEnd" >
        <view>AAAA</view>
    </view>

js代码

Page({
    data: {
        chaX: 0,// 转换值X
        chaY: 0,// 转换值Y
        touch: false, // 触摸标记
        posX:100, // 初始位置
        posY:20, // 初始位置
    },

    // 开始触摸
    touchStart: function (e) {
        console.log("== touchStart ==");// 拖动开始
        // e.touches[0] 内容就是触摸点的坐标值
        var tranX = e.touches[0].pageX-this.data.posX;
        var tranY = e.touches[0].pageY-this.data.posY;
        console.log("start tranX: " + tranX);
        console.log("start tranY: " + tranY);
        // 存储chaX和chaY 并设置 touch: true
        this.setData({
            touch: true, 
            chaX:tranX,
            chaY:tranY
        });
    },
    // 触摸移动
    touchMove: function (e) {
        if (!this.data.touch) return;
        // e.touches[0] 内容就是触摸点的坐标值
        var new_posX = e.touches[0].pageX-this.data.chaX;
        var new_posY = e.touches[0].pageY-this.data.chaY;
        console.log(" move new_posX: " + new_posX);
        console.log(" move nwe_posY: " + new_posY);
        this.setData({
            posX: new_posX,
            posY: new_posY
        });
    },
    // 触摸结束
    touchEnd: function (e) {
        console.log("== touchEnd ==")
        if (!this.data.touch) return;
        this.setData({
            touch: flase,
            chaX:0,
            chaY:0
        });
    }
})

参考资料

微信小程序 入门学习 资料收集

微信小程序微信touchxffxff1小程序前端

有关微信小程序 实现最简单的组件拖拽的更多相关文章

  1. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征，我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现，但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  2. ruby - 简单获取法拉第超时 - 2

    有没有办法在这个简单的get方法中添加超时选项？我正在使用法拉第3.3。Faraday.get(url)四处寻找，我只能先发起连接后应用超时选项，然后应用超时选项。或者有什么简单的方法？这就是我现在正在做的:conn=Faraday.newresponse=conn.getdo|req|req.urlurlreq.options.timeout=2#2secondsend 最佳答案 试试这个:conn=Faraday.newdo|conn|conn.options.timeout=20endresponse=conn.get(url

  3. ruby - 用 Ruby 编写一个简单的网络服务器 - 2

    我想在Ruby中创建一个用于开发目的的极其简单的Web服务器(不，不想使用现成的解决方案)。代码如下:#!/usr/bin/rubyrequire'socket'server=TCPServer.new('127.0.0.1',8080)whileconnection=server.acceptheaders=[]length=0whileline=connection.getsheaders想法是从命令行运行这个脚本，提供另一个脚本，它将在其标准输入上获取请求，并在其标准输出上返回完整的响应。到目前为止一切顺利，但事实证明这真的很脆弱，因为它在第二个请求上中断并出现错误:/usr/b

  4. ruby-on-rails - 简单的 Ruby on Rails 问题——如何将评论附加到用户和文章？ - 2

    我意识到这可能是一个非常基本的问题，但我现在已经花了几天时间回过头来解决这个问题，但出于某种原因，Google就是没有帮助我。(我认为部分问题在于我是一个初学者，我不知道该问什么......)我也看过O'Reilly的RubyCookbook和RailsAPI，但我仍然停留在这个问题上.我找到了一些关于多态关系的信息，但它似乎不是我需要的(尽管如果我错了请告诉我)。我正在尝试调整MichaelHartl'stutorial创建一个包含用户、文章和评论的博客应用程序(不使用脚手架)。我希望评论既属于用户又属于文章。我的主要问题是:我不知道如何将当前文章的ID放入评论Controller。

  5. ruby - 使用 Ruby 通过 Outlook 发送消息的最简单方法是什么？ - 2

    我的工作要求我为某些测试自动生成电子邮件。我一直在四处寻找，但未能找到可以快速实现的合理解决方案。它需要在outlook而不是其他邮件服务器中，因为我们有一些奇怪的身份验证规则，我们需要保存草稿而不是仅仅发送邮件的选项。显然win32ole可以做到这一点，但我找不到任何相当简单的例子。 最佳答案 假设存储了Outlook凭据并且您设置为自动登录到Outlook，WIN32OLE可以很好地完成此操作:require'win32ole'outlook=WIN32OLE.new('Outlook.Application')message=

  6. 华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2

    华为OD机试题本篇题目：明明的随机数题目输入描述输出描述：示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od，od薪资待遇，od机试题清单华为OD机试真题大全，用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o

  7. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  8. postman——集合——执行集合——测试脚本——pm对象简单示例02 - 2

    //1.验证返回状态码是否是200pm.test("Statuscodeis200",function(){pm.response.to.have.status(200);});//2.验证返回body内是否含有某个值pm.test("Bodymatchesstring",function(){pm.expect(pm.response.text()).to.include("string_you_want_to_search");});//3.验证某个返回值是否是100pm.test("Yourtestname",function(){varjsonData=pm.response.json

  9. Qt Designer的简单使用 - 2

    在前面两节的例子中，主界面窗口的尺寸和标签控件显示的矩形区域等，都是用C++代码编写的。窗口和控件的尺寸都是预估的，控件如果多起来，那就不好估计每个控件合适的位置和大小了。用C++代码编写图形界面的问题就是不直观，因此Qt项目开发了专门的可视化图形界面编辑器——QtDesigner（Qt设计师）。通过QtDesigner就可以很方便地创建图形界面文件*.ui，然后将ui文件应用到源代码里面，做到“所见即所得”，大大方便了图形界面的设计。本节就演示一下QtDesigner的简单使用，学习拖拽控件和设置控件属性，并将ui文件应用到Qt程序代码里。使用QtDesigner设计界面在开始菜单中找到「Q

  10. MIMO-OFDM无线通信技术及MATLAB实现（1）无线信道：传播和衰落 - 2

     MIMO技术的优缺点优点通过下面三个增益来总体概括：阵列增益。阵列增益是指由于接收机通过对接收信号的相干合并而活得的平均SNR的提高。在发射机不知道信道信息的情况下，MIMO系统可以获得的阵列增益与接收天线数成正比复用增益。在采用空间复用方案的MIMO系统中，可以获得复用增益，即信道容量成倍增加。信道容量的增加与min(Nt,Nr)成正比分集增益。在采用空间分集方案的MIMO系统中，可以获得分集增益，即可靠性性能的改善。分集增益用独立衰落支路数来描述，即分集指数。在使用了空时编码的MIMO系统中，由于接收天线或发射天线之间的间距较远，可认为它们各自的大尺度衰落是相互独立的，因此分布式MIMO

随机推荐