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

2024-04-25 13:17:51

微信小程序实现拖拽 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;
}

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

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

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

选择图片时可设置图片是否是原图,图片来源.这用的也挺常见的,比如个人中心中设置头像,可以与wx.upLoadFile()API使用主要方法: wx.chooseImage(object) wxml  <button type="primary" bindtap="listenerButtonChooseImage">点击我选择相册</button>
微信小程序实现拖拽 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拖拽功能组件地址 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  <view class="container"> <view bindtap="box" class="box" > <view disable-scroll="true" wx:for="{{content}}" bindtouchmove="move" bindtouchstart=&
微信小程序 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输入框的实例实现效果图: 页面 <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层手势监听的使用场景:一般用于当前页面中没有

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

相关推荐

随机推荐