WeChat-Applet-Entwicklungsbild per Drag & Drop

In diesem Artikel werden hauptsächlich relevante Informationen zu detaillierten Beispielen für das Ziehen und Ziehen von Bildern in der WeChat-Applet-Entwicklung vorgestellt. Freunde in Not können sich auf

Detaillierte Erläuterungen zum Ziehen und Ziehen von Bildern in der WeChat-Applet-Entwicklung

1. Schreiben Sie die Seitenstruktur: 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. Seitenstil schreiben: 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. 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 
    }); 
  } 
})

Ich habe mich in letzter Zeit mit dem Zuschneiden von Bildern beschäftigt, aber ich bin auf verschiedene Probleme gestoßen. Leider ist die Programmierung nicht einfach.

Nachdem ich lange darüber nachgedacht hatte, beschloss ich, einfach anzufangen. Wenn Sie einen besseren Weg oder andere Ideen haben, können Sie diese gerne vorschlagen und gemeinsam diskutieren.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Absolute Positionierung von Bildern (Hintergrundbildern) in WeChat-Miniprogrammen

WeChat-Miniprogramm bestanden Die Funktion zum Speichern und Teilen von Bildern in Moments ist implementiert

nodejs entwickelt WeChat-Applet zur Implementierung der Passwortverschlüsselung

Das obige ist der detaillierte Inhalt vonWeChat-Applet-Entwicklungsbild per Drag & Drop. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!