重力操作图片移动（小程序）

废话不说直接上代码

index.wxml代码

<view>重力操作图片移动（小程序） </view>


<image bindtap="changeName" id='img' style="-webkit-transition: transform .2s linear;width: 200px; height: 200px; left:0px;-webkit-transform:translate3d({{transformLeft}}px,0px,0)"  src="{{src}}"></image>




<text>学习交流添加此群： </text>
<text>225467502 </text>
<text>点击链接加入群【微信小程序】： </text>
<text>https://jq.qq.com/?_wv=1027&k=430DdWd
</text>
<text>也可以扫码关注此公众号。共同成长
</text>
<image bindtap="changeName" id='img' style="width: 200px; height: 200px; "  src="qrcode.jpg"></image>

index.js代码

var transformLeft=0,obj;
Page({
data: {
    src: 'test.png',
   transformLeft:50
  },
   changeName: function(e) {
      // sent data change to view
      console.log(this);
      this.setData({
        name: 'MINA'
      })
    },
onLoad: function (e) {
    obj = this;
   console.log(this.data.mgLeft);
   wx.onAccelerometerChange(function(res) {
     if(res.x>0)
     {
        transformLeft +=3; 
     }
     else if(res.x<0)
     {
        transformLeft -=3; 
     }
     obj.setData({
        transformLeft: transformLeft
      })
    
  })
    
  }
})

相关图片见附件