大飞

大飞 关注TA

挑战一切!

大飞

大飞

关注TA

挑战一切!

  • 加入社区3,268天
  • 写了333,609字

该文章投稿至Nemo社区   Js、Css、Html  板块 复制链接


微信小程序——拖曳图片

发布于 2017/01/14 20:51 1,637浏览 0回复 1,432

 安卓中的拖曳实现步骤:

      1.获取屏幕的宽高

      2.监控触摸事件move

      3.获取移动的xy方向的距离,计算图片应该偏移的距离

     4.设置图片偏移

同样微信小程序也是这样的步骤



视图层:

<view class="page">
<image class="dragview"   bindtouchmove="touhMoveMethod" 
 src="../../images/voice_image/voice_icon_speaking_bg_normal.png"
 style="bottom:{{maginBottom}}px;right:{{magnRight}}px;"></image>
</view>

控制层:

Page({
  data: {
    maginBottom: 0,
    magnRight: 0,
    screenWidth: 0,
    screenHeight: 0
  },

  onLoad: function () {
    var _this = this;
    //获取屏幕的宽高
    wx.getSystemInfo({
      success: function (res) {
        // success
        console.log(res)
        _this.setData({
          screenHeight: res.windowHeight,
          screenWidth: res.windowWidth,
          maginBottom: res.windowHeight - 40,
          magnRight: res.windowWidth - 40
        })
      }
    })
  },
  /**
   * 监控移动的大小 并设置到图片上
   */
  touhMoveMethod: function (e) {
    var _this = this;
    console.log(e);
    var touchs = e.touches[0];
    var pageX = touchs.pageX;
    var pageY = touchs.pageY;
    //防止越界
    if (pageX < 0 || pageY < 0 || pageX > this.data.screenWidth - 40 || this.data.screenHeight - pageY <= 40) return;
    _this.setData({
      maginBottom: _this.data.screenHeight - 40 - pageY,
      magnRight: _this.data.screenWidth - 40 - pageX
    })

  }
})
本文标签
 {{tag}}
点了个评