Image de développement de l'applet WeChat par glisser-déposer

Cet article présente principalement des informations pertinentes sur des exemples détaillés de glisser-déposer d'images dans le développement du mini-programme WeChat. Les amis dans le besoin peuvent se référer à

Explication détaillée des exemples de glisser-déposer d'images dans le mini-programme WeChat. développement

1. Écrire la structure de la page : moveimg.wxml

<view class="container"> 
  <view class="cnt"> 
    <image class="image-style" src="../uploads/foods.jpg" style="left:{{ballleft}}px;width:{{screenWidth}}px" bindtouchmove="ballMoveEvent"> 
    </image> 
  </view> 
</view>

2. Écrivez le style de la page : moveimg.wxss

.container { 
  box-sizing:border-box; 
  padding:1rem; 
} 
.cnt{ 
  width:100%; 
  height:15rem; 
  border: 1px solid #ccc; 
  position:relative; 
  overflow: hidden; 
} 
.image-style{  
  position: absolute;  
  top: 0px;  
  left:0px;  
  height:100%;  
}

3. Définir les données : moveimg.js

var app = getApp() 
Page({ 
  data: { 
    ballleft:-20, 
    screenWidth: 0, 
  }, 
  onLoad: function() { 
    var _this = this; 
    wx.getSystemInfo({ 
      success: function(res) { 
        _this.setData({ 
          screenHeight: res.windowHeight, 
          screenWidth: res.windowWidth, 
        }); 
      } 
    }); 
 
  }, 
  ballMoveEvent: function(e) { 
    var touchs = e.touches[0]; 
    var pageX = touchs.pageX; 
    console.log('宽度 '+this.data.screenWidth) 
    console.log('pageX: ' + pageX); 
    //这里用right和bottom.所以需要将pageX pageY转换  
    var x = this.data.screenWidth/2 - pageX-20; 
    if(this.data.screenWidth>385){ 
      if(x>42){x=42;} 
    }else{ 
      if(x>32){x=32;} 
    } 
    if(x<0){x=0;} 
    console.log(&#39;x:&#39; + x) 
    this.setData({ 
      ballleft: -x 
    }); 
  } 
})

J'ai étudié le recadrage d'images ces jours-ci. J'ai des idées, mais j'en ai rencontré diverses. problèmes. Malheureusement, la programmation n'est pas facile.

Après y avoir longuement réfléchi, j'ai décidé de me lancer simplement. Si vous avez une meilleure solution ou d'autres idées, n'hésitez pas à les proposer et à en discuter ensemble.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Positionnement absolu des images (images d'arrière-plan) dans les mini-programmes WeChat

Mini-programme WeChat passé La fonction d'enregistrement des images et de leur partage dans Moments est implémentée

nodejs développe l'applet WeChat pour implémenter le cryptage des mots de passe

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!