如何制作小程序_微信小程序开发图片拖拽实例详解

微信小程序开发图片拖拽实例详解     投稿:lqh   这篇文章主要介绍了微信小程序开发图片拖拽实例详解的相关资料,需要的朋友可以参考下

微信小程序开发图片拖拽实例详解

1.编写页面结构:moveimg.wxml

 view 
 view 
 image src="../uploads/foods.jpg" bindtouchmove="ballMoveEvent" 
 /image 
 /view 
 /view 

2.编写页面样式: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('x:' + x) 
 this.setData({ 
 ballleft: -x 
 }); 

  这几天一直在研究图片裁剪,思路是有,可是却遇到各种问题。可怜编程不易啊。

想了好久,决定还是简单开始吧。如果大家有更好的方式或是其他想法,欢迎提出,一起讨论。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!


相关阅读