微信小程序实现拖拽功能


Posted in Javascript onSeptember 26, 2019

微信小程序实现拖拽功能

<view class='collectBox' 
  bindtap='addCollect' 
  wx:if="{{write[0]+write[1] > 0}}" 
  bindtouchmove="touchmove" 
  catch:touchmove 
  style="left:{{write[0]}}px;top:{{write[1]}}px;">
  <image src='../../images/icon/addcollect.png'></image>
</view>
// pages/cateDetaile/cateDetaile.js
const app = getApp()
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    // 拖拽参数
    writePosition: [80, 90], //默认定位参数
    writesize: [0, 0],// X Y 定位
    window: [0, 0], //屏幕尺寸
    write: [0, 0], //定位参数
    scrolltop: 0,//据顶部距离
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 在页面中定义插屏广告
    let that = this;
    that.getSysdata();
  },
  //计算默认定位值
  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('.collectBox').boundingClientRect(function (res) {
            console.log(res.width)
            that.data.writesize = [res.width, res.height];
          }).exec();
        })
      },
      fail: function (e) {
        console.log(e)
      }
    });
  },
  //开始拖拽  
  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];
    that.setData({
      write: position
    });
  },
  onPageScroll(e) {
    this.data.scrolltop = e.scrollTop;
  },
})

总结

以上所述是小编给大家介绍的微信小程序实现拖拽功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
js变量作用域及可访问性的探讨
Nov 23 Javascript
JavaScript 面向对象的之私有成员和公开成员
May 04 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
js获取UserControl内容为拼html时提供方便
Nov 02 Javascript
js数组的操作指南
Dec 28 Javascript
JQuery ztree 异步加载实例讲解
Feb 25 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
Jul 26 Javascript
vue 中滚动条始终定位在底部的方法
Sep 03 Javascript
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
JS字符串常用操作方法实例小结
Jun 24 Javascript
JS实现无限轮播无倒退效果
Sep 21 Javascript
vue用BMap百度地图实现即时搜索功能
Sep 26 #Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 #Javascript
微信小程序点击列表跳转到对应详情页过程解析
Sep 26 #Javascript
vue+element tabs选项卡分页效果
Jun 29 #Javascript
layui实现根据table数据判断按钮显示情况的方法
Sep 26 #Javascript
vue+element表格导出为Excel文件
Sep 26 #Javascript
利用layer实现表单完美验证的方法
Sep 26 #Javascript
You might like
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
php的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
PHP new static 和 new self详解
2017/02/19 PHP
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
javascript权威指南 学习笔记之null和undefined
2011/09/25 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
详解angular中通过$location获取路径(参数)的写法
2017/03/21 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
JS实现动态添加外部js、css到head标签的方法
2019/06/05 Javascript
Vue.set 全局操作简单示例
2019/09/19 Javascript
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
[01:32]DOTA2上海特锦赛现场采访:最想COS的英雄
2016/03/25 DOTA
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
简单介绍Python中的几种数据类型
2016/01/02 Python
python监控文件或目录变化
2016/06/07 Python
python基于pyDes库实现des加密的方法
2017/04/29 Python
Python中跳台阶、变态跳台阶与矩形覆盖问题的解决方法
2018/05/19 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
Python内存管理实例分析
2019/07/10 Python
Django框架视图介绍与使用详解
2019/07/18 Python
python实现飞机大战小游戏
2019/11/08 Python
HTML5在手机端实现视频全屏展示方法
2020/11/23 HTML / CSS
蔻驰法国官网:COACH法国
2018/11/14 全球购物
雅诗兰黛澳大利亚官网:Estée Lauder澳大利亚
2019/05/31 全球购物
2014年会演讲稿范文
2014/01/06 职场文书
利群广告词
2014/03/20 职场文书
小学一年级评语大全
2014/04/22 职场文书
预备党员学习十八届三中全会精神思想汇报
2014/09/13 职场文书
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
2016年师德学习心得体会
2016/01/12 职场文书
600字作文之感受大自然
2019/11/27 职场文书