微信小程序实现拖拽 image 触摸事件监听的实例

微信小程序实现拖拽 image 触摸事件监听的实例

需要做个浮在scroll-view之上的button.尝试了一下.

实现效果图：

Android中也会有类似移动控件的操作.思路差不多.获取到位移的X Y 的变量,给控件设置坐标.

1.index.wxml

<image class="image-style" src="../../images/gundong.png" bindtap="ballClickEvent" style="bottom:{{ballBottom}}px;right:{{ballRight}}px;" bindtouchmove="ballMoveEvent">
</image>

简单的设置一张图片,添加触摸事件监听.点击事件监听.根据触摸事件获取X Y位移,设置为image的位置

2.index.js

//index.js
//获取应用实例
var app = getApp()
Page({
 data: {
  ballBottom: 240,
  ballRight: 120,
  screenHeight: 0,
  screenWidth: 0,
 },
 onLoad: function () { //获取屏幕宽高
  var _this = this;
  wx.getSystemInfo({
   success: function (res) {
    _this.setData({
     screenHeight: res.windowHeight,
     screenWidth: res.windowWidth,
    });
   }
  });
 },
 ballMoveEvent: function (e) {
  console.log('我被拖动了....')
  var touchs = e.touches[0];
  var pageX = touchs.pageX;
  var pageY = touchs.pageY;
  console.log('pageX: ' + pageX)
  console.log('pageY: ' + pageY) 

//防止坐标越界,view宽高的一般
  if (pageX < 30) return;
  if (pageX > this.data.screenWidth - 30) return;
  if (this.data.screenHeight - pageY <= 30) return;
  if (pageY <= 30) return; 

//这里用right和bottom.所以需要将pageX pageY转换
  var x = this.data.screenWidth - pageX - 30;
  var y = this.data.screenHeight - pageY - 30;
  console.log('x: ' + x)
  console.log('y: ' + y)
  this.setData({
   ballBottom: y,
   ballRight: x
  });
 }, 

//点击事件
 ballClickEvent: function () {
  console.log('点击了....')
 }
})

3.index.wxss

这里需要设置z-index

.image-style{
 position: absolute;
 bottom: 240px;
 right: 100px;
 width: 60px;
 height: 60px;
 z-index: 100;
}

如有疑问请留言或者到本站社区交流讨论，本站关于小程序的文章还有很多，希望大家搜索查阅，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • 微信小程序 image组件binderror使用例子与js中的onerror区别

    微信小程序image组件binderror使用例子(对应html.js中的onerror) 官方文档  binderror HandleEvent 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong'} 在微信小程序开发中,我们使用列表包含图片,如果这个图片链接404错误,那么我们应该给它提供一个默认的友好URL地址.html和js中使用onerror事件就可以了 <img src="image.g

  • 微信小程序 Image组件实例详解

    微信小程序 Image组件实例详解

    image组件也是一个程序不可缺少的,可以这样说一个app中image组件随处可以看到,一般 image有两种加载方式第一种是网络图片第二种是本地图片资源,都用src属性去指定. 重点属性: 三种缩放模式 九种剪切方式 wxml <!--3中是缩放模式 scaleToFill 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满image元素 aspectFit 保持纵横比缩放图片,使图片的长边能完全显示出来.也就是说,可以完整地将图片显示出来. aspectFill 保持纵横比缩放图片,只保证图片

  • 微信小程序 chooseImage选择图片或者拍照

    微信小程序 chooseImage选择图片或者拍照 一.使用API wx.chooseImage(OBJECT) var util = require('../../utils/util.js') Page({ data:{ src:"../image/pic4.jpg" }, gotoShow: function(){var _this = this wx.chooseImage({ count: 9, // 最多可以选择的图片张数,默认9 sizeType: ['original'

  • 微信小程序 Image API实例详解

    微信小程序 Image API实例详解

    选择图片时可设置图片是否是原图,图片来源.这用的也挺常见的,比如个人中心中设置头像,可以与wx.upLoadFile()API使用 主要方法: wx.chooseImage(object) wxml <!--监听按钮--> <button type="primary" bindtap="listenerButtonChooseImage">点击我选择相册</button> <!--通过数据绑定的方式动态获取js数据-->

  • 微信小程序实现拖拽 image 触摸事件监听的实例

    微信小程序实现拖拽 image 触摸事件监听的实例

    微信小程序实现拖拽 image 触摸事件监听的实例 需要做个浮在scroll-view之上的button.尝试了一下. 实现效果图: Android中也会有类似移动控件的操作.思路差不多.获取到位移的X Y 的变量,给控件设置坐标. 1.index.wxml <image class="image-style" src="../../images/gundong.png" bindtap="ballClickEvent" style=&qu

  • 微信小程序canvas拖拽、截图组件功能

    微信小程序canvas拖拽、截图组件功能

    先看下微信小程序canvas拖拽功能 组件地址 github.com/jasondu/wx-- readme近期补上 实现效果 如何实现 使用canvas 使用movable-view标签 由于movable-view无法实现旋转,所以选择使用canvas 需要解决的问题 如何将多个元素渲染到canvas上 如何知道手指在元素上.如果多个元素重叠如何知道哪个元素在最上层 如何实现拖拽元素 如何缩放.旋转.删除元素 看起来挺简单的嘛,就把上面这几个问题解决了,就可以实现功能了:接下来我们一一解决.

  • 微信小程序移动拖拽视图-movable-view实例详解

    JS中的sender参数(sender是事件的传值)前提是只有一个touch移动的时候.多个touch需要在 changedTouches 数组中查找 redclcik:function(sender){ wx.showModal({ title: '点击红色', content: '', }) console.log(sender); }, redmove:function(sender){ console.log(sender); // console.log(sender.changedT

  • 微信小程序实现拖拽功能

    <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.p

  • 微信小程序 实现拖拽事件监听实例详解

    微信小程序 实现拖拽事件监听实例详解

    微信小程序 拖拽监听功能: 在软件开发或者 APP应用开发的时候,经常会遇到拖拽监听,最近自己学习微信小程序的知识,就想实现这样的拖拽效果,这里就记录下. 需要做个浮在scroll-view之上的button.尝试了一下. 上GIF: Android中也会有类似移动控件的操作.思路差不多.获取到位移的X Y 的变量,给控件设置坐标. 1.index.wxml ../images/gundong.png" bindtap="ballClickEvent" style="

  • 微信小程序之拖拽排序（代码分享）

    index.wxml <!--index.wxml--> <view class="container"> <view bindtap="box" class="box" > <view disable-scroll="true" wx:for="{{content}}" bindtouchmove="move" bindtouchstart=&

  • 微信小程序 input表单与redio及下拉列表的使用实例

    微信小程序 input表单与redio及下拉列表的使用实例

    微信小程序 input表单与redio及下拉列表的使用实例 一个简单的预约类型的表单,效果 主要代码: <form bindsubmit="bindSave"> <view class="form-box"> <view class="row-wrap"> <view class="label">联系人</view> <view class="labe

  • 微信小程序picker组件下拉框选择input输入框的实例

    微信小程序picker组件下拉框选择input输入框的实例

    微信小程序picker组件下拉框选择input输入框的实例 实现效果图: 页面 <view class="row-wrap"> <view class="label">预约项目</view> <picker bindchange="bindCasPickerChange" value="{{casIndex1}}" range="{{casArray}}">

  • 微信小程序学习总结（四）事件与冒泡实例分析

    微信小程序学习总结（四）事件与冒泡实例分析

    本文实例讲述了微信小程序学习总结(四)事件与冒泡.分享给大家供大家参考,具体如下: 先来熟悉一个swiper组件,可以实现我们常见的轮播图效果. <view> <swiper class='swiper' indicator-dots="true" indicator-color="rgba(0, 0, 0, .3)" autoplay="true" interval="2000"> <swipe

  • Android 触摸事件监听（Activity层，ViewGroup层，View层）详细介绍

    Android不同层次的触摸事件监听 APP开发中,经常会遇到有关手势处理的操作,比如向右滑动返回上一个页面.关于触摸事件的处理,我们可以大概处理在不同的层次上. Activity层:可以看做触摸事件获取的最顶层 ViewGroup层:ViewGroup层可以自主控制是否让子View获取触摸事件 View层:可以决定自己是否真正的消费触摸事件,如果不消费抛给上层ViewGroup Activity级别的手势监听:(右滑动返回上层界面) Activity层手势监听的使用场景:一般用于当前页面中没有

随机推荐